jQuery Parent() vs Closest() (v6)

Revision 6 of this benchmark created on

Preparation HTML

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#"> Mobile Keywords</a>
    </div>
      <div id="keywords" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#">Another Category</a>
    </div>
      <div id="category-2" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Closest
$('.show').click(function() {
    $(this).closest('td.cat').find('.hide').fadeIn();
});
ready
Parent
$('.show').click(function() {
    $(this).parent().next('div').fadeIn('slow');
});
 
ready

Revisions

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