CODEWITHSUNDEEP
jquerydom
Petrogad
Petrogad

Reputation: 4423

jQuery navigating the dom with Each and Nth Child

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/">test3</a> </td>
            <td align="right"><a href="http://www.foo.com/User/1857/Feedback.html">+366</a> </td>
            <td>Near Mint English</td>
            <td align="right">8</td>
            <td align="right">12.49</td>
            <td><a href="http://www.foo.com/">Add to Cart</a> </td>
          </tr>
          <tr bgcolor="#f0f0f0">
            <td><a href="http://www.foo.com/">test4</a> </td>
            <td align="right"><a href="http://www.foo.com/User/637/Feedback.html">+1,257</a> </td>
            <td>Near Mint English</td>
            <td align="right">14</td>
            <td align="right">13.58</td>
            <td><a href="http://www.foo.com/">Add to Cart</a> </td>
          </tr>
          <tr bgcolor="#e0e0e0">
            <td><a href="http://www.foo.com/">test5</a> </td>
            <td align="right"><a href="http://www.foo.com/User/2989/Feedback.html">+2,062</a> </td>
            <td>Very Fine English</td>
            <td align="right">2</td>
            <td align="right">13.99</td>
            <td><a href="http://www.foo.com/">Add to Cart</a> </td>
          </tr>
        </tbody>
      </table></td>
  </tr>
</tbody>

Thank you!

Upvotes: 0

Views: 3720

Answers (4)

DisgruntledGoat
DisgruntledGoat

Reputation: 72560

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.

Upvotes: 1

Doug Neiner
Doug Neiner

Reputation: 66201

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.

Upvotes: 1

cletus
cletus

Reputation: 625167

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)")

Upvotes: 0

Deeksy
Deeksy

Reputation: 5434

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.

Upvotes: 1

Related Questions