Info

A comparison between using a descendant selector $('.level-one .some-child') vs using find $('.level-one').find('.some-child').

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div></div>
<table class="level-one">
  <tr>
    <td class="some-child"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="some-child"></td>
  </tr>
</table>
<div></div>

Preparation code output

Test runner

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

Java applet disabled.

var elems = $('.level-one .some-child');

var elems = $('table.level-one .some-child');

var elems = $('.level-one td.some-child');

var elems = $('table.level-one td.some-child');

var elems = $('.level-one').find('.some-child');

var elems = $('table.level-one').find('.some-child');

var elems = $('.level-one').find('td.some-child');

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 Tyler Wood on 17th January 2013
• Revision 2: published on 21st January 2013
• Revision 3: published by Tyler Wood on 21st February 2013

0 comments