使用jQuery选择每行中的第一个TD

Question

如何为表格中每一行的第一个单元格指定样式？

$("#myTable tr td:first").addClass("black");

- santa

Answer 1

使用伪类 :first-child 代替 :first。

$("#myTable tr td:first-child").addClass("black");

:first 伪类实际上是选择在你的列表中返回的第一个元素。例如，$('div span:first') 只会返回第一个出现的 div 下的第一个 span 元素。 :first-child 伪类选择特定父元素下的第一个子元素，但会返回所有第一个子元素。例如，$('table tr td:first-child') 返回每一行的第一个单元格。

当你使用 :first 时，它只返回第一行中第一个被选中的单元格。

如需更多信息，请参考 jQuery 文档:

• http://api.jquery.com/first-selector/
• http://api.jquery.com/first-child-selector/

- Devin Burke

Answer 2

你的想法已经很接近了，我认为你只需要使用 :first-child 而不是 :first，所以代码应该像这样：

$("#myTable tr td:first-child").addClass("black");

- nathan gonzalez

Answer 3

就像这样：

$("#myTable tr").each(function(){
    $(this).find('td:eq(0)').addClass("black");
});

- Teneff

---

这种方法稍微不太高效，因为你使用了循环、find和创建函数，而仅仅使用:first-child伪类，你并没有添加太多处理，这些处理在原始代码中已经在使用了。尽管如此，它仍然是一个不错的替代方案。 - Devin Burke

@Justin Satyr，你认为jQuery是使用什么？魔杖吗？ - Teneff

不，我知道在幕后jQuery使用了所有这些内容，但是（a）我期望使用单个选择器比使用单个选择器和find语句更快，且（b）至少在代码量方面使用单个选择器更高效。 - Devin Burke

Answer 4

$("#myTable tr").find("td:first").addClass("black");

- bevacqua

---

这种方法不如使用:first-child高效，因为它产生相同的结果但会进入循环。不过，这仍然是find方法的一个不错的用法。 - Devin Burke

@Justin 你说得对，我不知道:first-child选择器可以这样使用。 - bevacqua

当TH之后放置TD并且你要找到TD时，:first-child是没有帮助的。在这种情况下，jq不会返回给你TD，因为它不是该行的第一个子元素，所以使用:first就很方便。 - neoswf

Answer 5

尝试：

$("#myTable td:first-child").addClass("black");

- Stephane Gosselin

---

是的。:o) 糟糕。如果有人想要让任何表格的第一个单元格变黑，我会保留它。 - Stephane Gosselin