JSFiddle - React, Tailwind, and code Playground

by ngryman

HTML

<h1>$('#root').find(':not(#nested) > li')</h1>
<ul id="root">
    <ul id="nested">
        <li></li>
    </ul>
    <li></li>
    <li></li>
</ul>

<ul id="report"></ul>

CSS

#root {
    display: none;
}

JavaScript

var report = {
    'jquery from container': $('#root').find(':not(#nested) > li').length,
    'QSA from container': $('#root')[0].querySelectorAll(':not(#nested) > li').length,
    'jquery from body': $('body').find(':not(#nested) > li').length,
    'QSA from body': $('body')[0].querySelectorAll(':not(#nested) > li').length
};

$.each(report, function(k, v) {
    $('<li>').text(k + ': ' + v).appendTo('#report');
});