jQuery traverse within .find() (deep) (v3)

Revision 3 of this benchmark created on

Description

DOM traversal in jQuery within .find()

Preparation HTML

<div>
<div>
<div>
<div class="a">
<ul class="drop-menu">
 <li class="expanded"><a href="#"><span>Expanded</span></a>
  <ul class="drop-sub-menu">
   <li class="list-item-one"><label for="chkLabelOne"><input type="checkbox" id="chkBoxOne" class="inputValueOne">Check Box One</label></li>
   <li class="list-item-two"><label for="chkLabelTwo"><input type="checkbox" id="chkBoxTwo" class="inputValueTwo">Check Box Two</label></li>
  </ul>
 </li>
</ul>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var tt;
</script>
<script>
  var tf;
  var $parent = $(".a")
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Find with deep tag-specific traversal
tf = $parent.find('ul > li > ul > li > label > input[type=checkbox]').addClass('Keith Richards');
ready
Find with tag-specific traversal by tag + class name
tf = $parent.find('ul.drop-menu > li.expanded > ul.drop-sub-menu > li.list-item-one > label.chkLabelOne > input.inputValueOne').addClass('Keith Richards');
ready
Find with tag-specific traversal by class name
tf = $parent.find('.drop-menu > .expanded > .drop-sub-menu > .list-item-one > .chkLabelOne > .inputValueOne').addClass('Keith Richards');
ready

Revisions

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