CODEWITHSUNDEEP
jqueryjquery-selectors
Danno
Danno

Reputation: 1003

Odd jQuery selector used in a find method

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?

Upvotes: 1

Views: 314

Answers (4)

bobince
bobince

Reputation: 536567

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');

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630559

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>

Upvotes: 1

heisenberg
heisenberg

Reputation: 9759

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)

Upvotes: 0

Pointy
Pointy

Reputation: 413826

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>

Upvotes: 10

Related Questions