Checking for visible child element

Benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<p>
<div class="child">
<div id="firstEl" style="display:none"></div>
<div id="secondEl" style="display:none"></div>
<div id="thirdEl"></div>
<div id="fourthEl"></div>
</div>
</p>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Selector with find
jQuery('body').children('.child').find(':visible');
ready
jQuery Selector with find using :first
jQuery('body').children('.child').find(':visible:first');
ready
jQuery Selector
jQuery('body').children('.child>:visible:first');
ready
jQuery Selector with CSS Display
var children = jQuery('body').children('.child');
for(var i = 0, len = children.length; i < len; i++) {
  if(jQuery(children[i]).css('display')!== 'none') {break;}
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.