jQuery parent/child selectors

JavaScript performance comparison

Revision 13 of this test case created

Info

The different ways to select (context, pure selector, +find()) DOM elements using jQuery in parent/child scenarios.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
  <ul id="list">
    <li class="test">
    </li>
    <li>
    </li>
    <li class="test">
    </li>
    <li class="test">
    </li>
    <li id="abc">
<table><td></td</table>
    </li>
   
    <li class="test">
    </li>
    <li>
    </li>
    <li class="test">
    </li>
    <li>
    </li>
    <li class="test">
    </li>
  </ul>
</div>
<div class="test">
</div>
<script>
  var list = $('#list');
</script>

Preparation code output

  • Test runner

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

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/sec
    context
    var $test = $('table', list);
    pending…
    selector
    var $test = $('#abc table');
    pending…
    context and find()
    var $test = $(list).find('table');
    pending…
    created context
    var $test = $('table', $('#list'));
    pending…
    selector and find
    var $test = $('#list').find('table');
    pending…
    parent/child selector
    var $test = $('#list > #abc > table');
    pending…
    immediate children
    $test = $(list).children().children('table');
    pending…
    id
    var $test = $('table');
    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. Here’s a list of current revisions for this page:

    0 comments

    Add a comment