jQuery traversal vs find

Benchmark created on

Description

Same number for both every time?

Preparation HTML

<div id="parent">
  <span></span>
  <table>
    <caption>Table</caption>
    <tbody><tr><td></td></tr></tbody>
  </table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var $parent = $('#parent');
    var $span, $table, $caption, $tbody, $tr, $td;

Test runner

Ready to run.

Testing in
TestOps/sec
traversal with jQuery
var setVars = function () {
  var $self = $(this);
  var $children = $self.children();
  if ($children.size() !== 0) {
    $children.each(setVars);
  }

  switch (this.nodeName.toLowerCase()) {
    case 'span':
      $span = $self;
      break;
    case 'table':
      $table = $self;
      break;
    case 'caption':
      $caption = $self;
      break;
    case 'tbody':
      $tbody = $self;
      break;
    case 'tr':
      $tr = $self;
      break;
     case 'td':
       $td = $self;
       break;
  }
};
$parent.children().each(setVars);
ready
jQuery find
$span = $parent.find('span');
$table = $parent.find('table');
$caption = $parent.find('caption');
$tbody = $parent.find('tbody');
$tr = $parent.find('tr');
$td = $parent.find('td');
ready

Revisions

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