jQuery navigating the dom with Each and Nth Child.

Question

I'm trying to navigate through each of the tr element and select the 5th td element then store the value in it. What am I doing wrong?

 $("table tbody tr td tbody tr:nth-child(4)").each(function (i) {
 alert(this.text);
  });
<table>
<tbody>
  <tr>
    <td align="center"><table cellpadding="2" style="border: 2px solid rgb(208, 208, 208); border-spacing: 4px; border-collapse: collapse; background-color: rgb(240, 240, 240);">
        <tbody>
          <tr bgcolor="#e0e0e0">
            <th>Seller</th>
            <th>Feedback</th>
            <th>Description</th>
            <th>#</th>
            <th>$</th>
            <th/>
          </tr>
          <tr bgcolor="#e0e0e0">
            <td><a href="http://www.foo.com/"&gt;test3&lt;/a&gt; </td>
            <td align="right"><a href="http://www.foo.com/User/1857/Feedback.html"&gt;+366&lt;/a&gt; </td>
            <td>Near Mint English</td>
            <td align="right">8</td>
            <td align="right">12.49</td>
            <td><a href="http://www.foo.com/"&gt;Add to Cart</a> </td>
          </tr>
          <tr bgcolor="#f0f0f0">
            <td><a href="http://www.foo.com/"&gt;test4&lt;/a&gt; </td>
            <td align="right"><a href="http://www.foo.com/User/637/Feedback.html"&gt;+1,257&lt;/a&gt; </td>
            <td>Near Mint English</td>
            <td align="right">14</td>
            <td align="right">13.58</td>
            <td><a href="http://www.foo.com/"&gt;Add to Cart</a> </td>
          </tr>
          <tr bgcolor="#e0e0e0">
            <td><a href="http://www.foo.com/"&gt;test5&lt;/a&gt; </td>
            <td align="right"><a href="http://www.foo.com/User/2989/Feedback.html"&gt;+2,062&lt;/a&gt; </td>
            <td>Very Fine English</td>
            <td align="right">2</td>
            <td align="right">13.99</td>
            <td><a href="http://www.foo.com/"&gt;Add to Cart</a> </td>
          </tr>
        </tbody>
      </table></td>
  </tr>
</tbody>

Thank you!

Answer 1

You are missing a space between tr and :nth-child.

So:

$("table tbody tr td tbody tr > :nth-child(4)")...

This expression:

tr:nth-child(4)

means every tr that is the fourth child but:

tr :nth-child(4)

means every descendant of tr that is a fourth child. To restrict it just to children:

tr > :nth-child(4)

And since you want only <td> elements:

tr > td:nth-child(4)

should do it making the final expression:

$("table > tbody > tr > td > table > tbody > tr > td:nth-child(4)")

Answer 2

The :nth-child is applied to the child selector, not the parent:

$("table tbody tbody td:nth-child(5)").each(function (i) {
        alert(this.text);
});

I also removed un-needed selectors from your selection string.

Correction I just changed :nth-child(4) to :nth-child(5) because the nth-child selector is 1 based not 0 based like an index.

Answer 3

The :nth-child selector should be on the table cell, not the row, ie:

$("table tbody tr td tbody tr td:nth-child(4)")

By the way, you can clean this up a lot by ignoring the rows/cells of the outer table:

$("table table tr > :nth-child(4)")

I would also suggest adding a class on that nested table if possible in order to shorten your selector.

Answer 4

For starters, nth-child is 1 indexed, so to get the 5th child, you need nth-child(5). Also, your selector will select the 4th row, not the 5th child of the row, so what you want is

$("table tbody tbody tr td:nth-child(5)")

Hope that helps.