jQuery Selector Chaining

JavaScript performance comparison

Revision 2 of this test case created by Rob Tarr

Preparation code

<div class="container">
  <div class="main">
    <ul class="list-1">
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var i, html = "";
  
  for(i = 0; i < 500; i++) {
    html += "<li class=\"odd\">item</li> <li>item</li>"
  }
  
  $(".list-1").html(html);

};
</script>

Preparation code output

<div class="container"> <div class="main"> <ul class="list-1"> </ul> </div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
One selector
$('.container .main ul.list-1 li').css('color', 'red');
pending…
Chained with find
$('.container').find('.main').find('ul.list-1').find('li').css('color', 'blue');
pending…
Chained with children
$('.container').children('.main').children('ul.list-1').children('li').css('color', 'purple');
pending…
Chained with children selecting '.odd'
$('.container').children('.main').children('ul.list-1').children('.odd').css('color', 'green');
pending…
One selector finding '.odd'
$('.container .main ul.list-1 li.odd').css('color', 'red');
pending…
Cut to the chase
$('.odd').css('color', 'green');
pending…

Compare results of other browsers

Revisions

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

0 Comments