JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" data-is-dirty="">
    <div data-is-dirty="">
        <div data-is-dirty="">
        </div>    
    </div>
</div>

JavaScript

var horrible1 = $("#test").find("*").andSelf().filter("[data-is-dirty]").length;

var horrible2 = $("#test").find("[data-is-dirty]").andSelf().filter("[data-is-dirty]").length;


var elem = $("#test");
var horrible3 = elem.parent().find("#" + elem.attr("id") + "[data-is-dirty], #" + elem.attr("id") + " [data-is-dirty]").length;

var elem = $("#test");
var horrible4 = elem.find("[data-is-dirty]").add(elem.filter("[data-is-dirty]")).length;

var horrible5 = $("[data-is-dirty]").filter( "#test, #test *" ).length;


console.log("1:", horrible1);
console.log("2:", horrible2);
console.log("3:", horrible3);
console.log("4:", horrible4);
console.log("5:", horrible5);