Question

http://jsperf.com/dfgdfg33355

I have table

<table>
  <tr>
    <td>
      <div class="a"></div>
      <div class="data"></div>
    </td>
  </tr>
</table>

 $(".a").parent("td").find(".data").html('1');

vs

$(".a").parent("td").find(".data:first").html('1');

when i press on the div with class .a – go to the first td above , and find the div with class .data and put there a value.

my test was :

search for .data and put value

vs

search for first .data and put value

However it seems that if im not spcifieing first , it is faster.

how can it be ?

Answer 1

When you use pseudo selectors in jQuery you create the overhead of having to do work on that string to parse the selector. It is better to use the function equivelent rather than pseudo selectors.

Here is an updated version of your jsperf to show that using functions is a lot faster: http://jsperf.com/dfgdfg33355/2

Also if you check-out the above jsperf you will see that using .next() is the fastest method of DOM traversal in this situation.