jQuery .end() vs cached selector

Benchmark created by Kito on

Description

After reading http://www.learningjquery.com./2011/12/using-jquerys-pushstack-for-reusable-dom-traversing-methods I was wondering if this approach gave any advantage over caching selectors.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul class="first">
  <li class="foo">
    list item
    <span class="number">
      1
    </span>
  </li>
  <li>
    list item
    <span class="number">
      2
    </span>
  </li>
  <li class="bar">
    list item
    <span class="number">
      3
    </span>
  </li>
</ul>
<ul class="second">
  <li class="foo">
    list item 1
  </li>
  <li>
    list item 2
  </li>
  <li class="bar">
    list item 3
  </li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
.end()
$('ul.first').find('.foo').end().find('.bar');
ready
Cached
var $first = $('ul.first');
$first.find('.foo');
$first.find('.bar');
ready

Revisions

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