Question

我正在尝试浏览每个tr元素并选择第5个td元素，然后将值存储在其中。我做错了什么？

 $("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>

谢谢！

Answer 1

:nth-child应用于子选择器，而不是父选择器：

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

我还从您的选择字符串中删除了不需要的选择器。

更正我刚刚将:nth-child(4)更改为:nth-child(5)，因为nth-child选择器1基于0而非基于{{1}}的索引

Answer 2

:nth-child选择器应位于表格单元格上，而不是行中，即：

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

顺便说一下，你可以通过忽略外表的行/单元格来清理它：

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

我还建议在可能的情况下在该嵌套表上添加一个类，以便缩短选择器。

Answer 3

对于初学者来说，nth-child是1个索引，所以要获得第5个孩子，你需要nth-child（5）。此外，您的选择器将选择第4行，而不是行的第5个子项，因此您需要的是

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

希望有所帮助。

Answer 4

您错过了tr和:nth-child之间的空格。

所以：

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

这个表达式：

tr:nth-child(4)

表示的第四个孩子，但是：

tr :nth-child(4)

表示tr的每个后代都是第四个孩子。仅限于儿童：

tr > :nth-child(4)

因为你只想要<td>元素：

tr > td:nth-child(4)

应该做最后的表达：

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

jQuery使用Each和Nth Child浏览dom

4 个答案: