Odd jQuery selector used in a find method

Question

Does anyone have any idea what this jQuery selector will do?

object.find('td:eq(1) div div');

I know that the td:eq(1) will get the 2nd td element in the object, but what will the 2 div's referenced at the end of the selector do?

Answer 1

It finds the second table cell in a row (I think it's 0-based), and then a div inside a div inside that cell.

So like:

<tr>
  <td>
    Not me
  </td>
  <td>
    <div class='parent'>
      <div class='child'>
        This stuff here!
      </div>
    </div>
  </td>

Answer 2

This first part finds the 2nd <td> overall in the object, not per-row (for that you want :nth-child). The div div part finds divs 2 levels deep inside the selector.

Here's a matching example of object.find('td:eq(1) div div');

<tr>
 <td><td>
 <td>
   <div>
     <span> <!-- Or any wrappers, etc -->
       <div>Found me!</div>
     </span>
   </div>
 </td>
</tr>

Answer 3

what will the 2 div's referenced at the end of the selector do?

Find a div inside of a div. (same as the css selector)

Answer 4

As a side-note, you should generally avoid the non-standard jQuery selectors.

When you use only standard CSS selectors, jQuery can pass the selector work off to the fast built-in querySelectorAll function of modern browsers, but when you use :eq it has to go through the relatively slow native-JavaScript Sizzle selector library.

So you might prefer to spell it:

object.find('td').eq(1).find('div div');