jQuery .next() vs. .find() : direct children selector (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="foo">
  <div class="foo">
    <div class="post post-foo"></div>
  </div>
  <div class="bar foo">
    <div class="post-baz post"> </div>
  </div>
  <div class="foo baz">
    <div class="post-baz post"></div>
  </div>
  <div class="quux foo">
    <div class="post-baz post"></div>
  </div>
  <div class="foo baz">
    <div class="post-baz post"></div>
  </div>
</div>

Setup

var $foo = $('#foo');

Test runner

Ready to run.

Testing in
TestOps/sec
.find
$foo.find('> .foo > .post');
// Sizzle
// (not doc.querySelector because it doesn't support leading >)
ready
.children
$foo.children('.foo').children('.post');
// childNodes, element.matchesSelector
ready
.find() 2
$foo.find('.foo > .post');
// doc.querySelector
ready
.children() 2
$foo.find('.foo').children('.post');
// doc.querySelector, childNodes, element.matchesSelector
ready
.children() 3
$('#foo').children('.foo').children('.post');
// doc.getElementById, childNodes, element.matchesSelector
ready
.find() 3
$('#foo >.foo > .post');
// doc.querySelector
ready
.next()
$('#foo').next('.foo').next('.post');
ready
.next() 2
$foo.next('.foo').next('.post');
ready

Revisions

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