开发者

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&开发者_StackOverflow社区lt;/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!


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.


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.


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.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜