JSFiddle - React, Tailwind, and code Playground

by Akkuma

HTML

<div>
    <div>
        <div>
            <div>
                <div>
                    <div></div>
                    <div id="container">
                        <input type="checkbox" id="t" />
                        <label for="t" id="lt">Do It</label>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

var $input = $('#t');
$('#container').detach();
var $parent = $input.parent();

console.time('context');
for (var i = 0; i < 10000; i++) {
    $('label[for="' + $input[0].id + '"]', $input.parents().last());
}
console.timeEnd('context');

console.time('context');
for (var i = 0; i < 10000; i++) {
    $input.parents().last().find('label[for="' + $input[0].id + '"]');
}
console.timeEnd('context');

console.time('All Context');
for (var i = 0; i < 10000; i++) {
    $('label[for="' + $input[0].id + '"]', $input.parents());
}
console.timeEnd('All Context');

console.time('All Parents');
for (var i = 0; i < 10000; i++) {
    $parent.parents().find('label[for="' + $input[0].id + '"]');
}
console.timeEnd('All Parents');

console.time('crazy');
for (var i = 0; i < 10000; i++) {
    var $root = $input.parents("*:not(* *)");
    $root.find('label[for="' + $input[0].id + '"]');
}
console.timeEnd('crazy');