jQuery parent/child selectors

JavaScript performance comparison

Revision 37 of this test case created by Dmitriy

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">
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li>
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li class="test">
    </li>
    <li class="test">
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li>
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li class="test">
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li>
    </li>
    <li class="test">
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li>
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
    <li class="test">
      <div class="div-level1">
        <div class="div-level2">
          <div class="div-level3">
            <div class="div-level4">
              <div class="div-level5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="span">
      </span>
      <p class="p">
        <span class="p-span">
        </span>
      </p>
    </li>
  </ul>
</div>
<div class="test">
</div>
<script>
  var list = document.getElementById('list');
  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
DOM context
$('.test', document.getElementById('list'));
pending…
selector
$('#list .test');
pending…
DOM context and find()
$(document.getElementById('list')).find('.test');
pending…
created context
$('.test', $('#list'));
pending…
selector and find
$('#list').find('.test');
pending…
parent/child selector
$('#list > .test');
pending…
immediate children
$(document.getElementById('list')).children('.test');
pending…
created context and parent/child
$('> .test', $('#list'));
pending…
context and parent/child
$('> .test', document.getElementById('list'));
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