jQuery Selector Chaining (v2)

Revision 2 of this benchmark created by Rob Tarr on

Preparation HTML

<div class="container">
  <div class="main">
    <ul class="list-1">
    </ul>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Setup

var i, html = "";
    
    for(i = 0; i < 500; i++) {
      html += "<li class=\"odd\">item</li> <li>item</li>"
    }
    
    $(".list-1").html(html);

Test runner

Ready to run.

Testing in
TestOps/sec
One selector
$('.container .main ul.list-1 li').css('color', 'red');
ready
Chained with find
$('.container').find('.main').find('ul.list-1').find('li').css('color', 'blue');
ready
Chained with children
$('.container').children('.main').children('ul.list-1').children('li').css('color', 'purple');
ready
Chained with children selecting '.odd'
$('.container').children('.main').children('ul.list-1').children('.odd').css('color', 'green');
ready
One selector finding '.odd'
$('.container .main ul.list-1 li.odd').css('color', 'red');
ready
Cut to the chase
$('.odd').css('color', 'green');
ready

Revisions

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