开发者

jQuery navigating the dom with Each and Nth Child

开发者 https://www.devze.com 2022-12-13 19:08 出处:网络
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?

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

精彩评论

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