使用/ jQuery 在每一行中选择第一个 TD答案

【问题标题】：Select first TD in every row w/ jQuery使用/ jQuery 在每一行中选择第一个 TD
【发布时间】：2011-05-27 16:42:39
【问题描述】：

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

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

【问题讨论】：

标签： jquery

【解决方案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 文档：

【讨论】：

【解决方案2】：

你非常接近，我认为你需要的只是:first-child 而不是:first，所以是这样的：

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

【讨论】：

【解决方案3】：

像这样：

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

【讨论】：

此方法效率稍低，因为您使用的是循环，find，并创建了一个函数，而仅使用 :first-child 伪类，您不会添加太多处理尚未在他的原始代码中使用。不过，它仍然是一个不错的选择。
@Justin Satyr 你认为 jQuery 使用的是什么？魔杖？
不，我知道 jQuery 在幕后使用了所有这些东西，但是 (a) 我希望使用单个选择器比使用单个选择器和 find 语句更快，并且 (b) 使用单个选择器至少在代码量方面更有效。

【解决方案4】：

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

【讨论】：

这比使用:first-child 效率低，因为它具有相同的结果，但会陷入循环。不过，find 方法的使用仍然很好。
@Justin 你是对的，我不知道第一个孩子选择器会这样工作。
当 TD 放在 TH 之后并且您试图找到 TD 时，First-child 没有帮助。在这种情况下 jq 不会返回给你 TD，因为它不是该行的第一个孩子，并且 :first 很方便。

【解决方案5】：

试试：

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

【讨论】：