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

Test runner

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

Java applet disabled.

$('.container .main ul.list-1 li').css('color', 'red');

$('.container').find('.main').find('ul.list-1').find('li').css('color', 'blue');

$('.container').children('.main').children('ul.list-1').children('li').css('color', 'purple');

$('.container').children('.main').children('ul.list-1').children('.odd').css('color', 'green');

$('.container .main ul.list-1 li.odd').css('color', 'red');

$('.odd').css('color', 'green');

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