Info

See http://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid/1229405#1229405

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<div id="parent">
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
  <div class="a">
    a
  </div>
</div>
<script>
  var doc = document;

  function loop(ele) {
    for (var i = ele.length; i--;) {
      $(ele[i]).css({
        border: '1px solid pink'
      });
    }
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

$('.a').css({
  border: '1px solid red'
});

$('#parent .a').css({
  border: '1px solid green'
});

loop(doc.querySelectorAll('#parent .a'));

loop(doc.querySelectorAll('.a'));

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. Here’s a list of current revisions for this page:

• Revision 1: published by Gergő Tisza on 2nd July 2011
• Revision 2: published on 4th July 2011
• Revision 3: published by Kristof Neirynck on 4th July 2011
• Revision 4: published by BrianH on 5th July 2011
• Revision 5: published on 17th March 2013

0 comments