多个元素的 jQuery 奇/偶选择器答案

【问题标题】：jQuery odd/even Selectors for Multiple Elements多个元素的 jQuery 奇/偶选择器
【发布时间】：2012-08-18 19:31:29
【问题描述】：

我正在使用以下代码在一页上斑马线剥离几个表格：

    $(".events-table tr:even").css("background-color", "#fff");
$(".events-table tr:odd").css("background-color", "#efefef");

这工作得很好，但偶数/奇数间隔适用于页面上的每个表格。我希望每张桌子都有相同的图案。这意味着，对于页面上的每个表格，每个表格的第一行都应以相同的颜色开始，然后在第二行以相同的颜色开始。

有什么建议吗？

谢谢！

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以使用表格选择器，然后找到要着色的行，即：

$(".events-table").each(function()
{
    $(this).find("tr:even").css("background-color", "#fff");
    $(this).find("tr:odd").css("background-color", "#efefef");
});

【讨论】：

或者直接使用:nth-child(odd|even) :)

【解决方案2】：

使用:nth-child()（:nth-child(odd) 和:nth-child(even)）而不是:odd 或:even

$("table.events-table tr:nth-child(even)").css("background-color", "#fff");
$("table.events-table tr:nth-child(odd)").css("background-color", "#efefef");

:odd 和 :even 实际上是从 0 开始的，这意味着奇数行是 0、2、4 等，反之亦然，用于在完整的包装集中获得奇数和偶数匹配项。

看看 this Working Demo 来演示一下。

nth-child() 在父元素的基础上执行选择。

【讨论】：

【解决方案3】：

问题在于.events-table tr 选择器返回一个trs 列表，与它们是否属于同一个表无关。 :even 和 :odd 选择器应用于完整列表。

如果您没有大量的表，您可以只使用 id 而不是类。

$("#events-table1 tr:even").css("background-color", "#fff");
$("#events-table1 tr:odd").css("background-color", "#efefef");
$("#events-table2 tr:even").css("background-color", "#fff");
$("#events-table2 tr:odd").css("background-color", "#efefef");

【讨论】：

更好的解决方案，允许我有选择地选择我想要以这种方式格式化的表格。非常感谢！

【解决方案4】：

:odd 和 :even 选择器是 jQuery 特定的“扩展”。正如 bluenote 所提到的，它们似乎对目标类型的 all 元素列表进行操作（在您的情况下，.events-table 中的所有 tr。

替代方案包括：

通过将表格元素作为第二个参数传递$('tr:odd', mytable).css({})
使用“真正的”css nth-child 选择器$('.events-table tr:nth-child(even)').css()，但要注意跨浏览器兼容性问题。
将“奇数”或“偶数”类分配给适当的行并明确定位。

【讨论】：

【解决方案5】：

$("tr:odd").css("background-color", "#bbbbff");

将更改页面上所有表格的奇数行，您可以为偶数添加另一行

【讨论】：

【解决方案6】：

尝试向您的表格添加 ID 并一次更新一个表格的 CSS。

【讨论】：