jQuery parent/child selectors

JavaScript performance comparison

Revision 7 of this test case created by Mike McCaughan

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">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li class="test2">
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li class="test2">
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li class="test2">
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li class="test">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li class="test">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li class="test2">
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li class="test">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li class="test">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
    <li class="test">
      <ul>
        <li>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
            </li>
            <li>
              <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
              </ul>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
          </ul>
        </li>
        <li>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div class="test">
</div>
<script>
  var list = document.getElementById('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 = $('> .test', list);
pending…
selector
var $test = $('#list > .test');
pending…
context and find()
var $test = $(list).find('> .test');
pending…
created context
var $test = $('> .test', $('#list'));
pending…
selector and find
var $test = $('#list').find('> .test');
pending…
parent/child selector
var $test = $('#list > .test');
pending…
immediate children
$test = $(list).children('.test');
pending…
find context
var $test = $('> .test', $(list));
pending…
multiple find
var $test = $(list).find('.test').find('.test2');
pending…
descendent selector
var $test = $(list).find('.test .test2');
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