jQuery parent/child selectors (v36)

Revision 36 of this benchmark created on

Description

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

Preparation HTML

<script src="https://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');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
context
var $test = $('.test', list);
ready
selector
var $test = $('#list .test');
ready
context and find()
var $test = $(list).find('.test');
ready
created context
var $test = $('.test', $('#list'));
ready
selector and find
var $test = $('#list').find('.test');
ready
parent/child selector
var $test = $('#list > .test');
ready
immediate children
$test = $(list).children('.test');
ready
created context and parent/child
var $test = $('> .test', $('#list'));
ready
context and parent/child
var $test = $('> .test', list);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.