jQuery奇数/偶数多元素选择器

Question

我使用以下代码斑马在一个页面上剥离几个表:

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

这工作正常,但偶数/奇数间隔应用于页面上的每个表.我希望每个表都有相同的模式.意思是,对于页面上的每个表,每个表应该在第一行上以相同的颜色开始,然后在第二行上相同.

有什么建议？

谢谢!

Answer 1

您可以使用表的选择器,然后找到要着色的行,即:

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

Answer 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等,反之亦然,并用来获取奇数和偶数的完全包裹集相匹配.

看看这个工作演示来演示.

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

Answer 3

尝试将 ID 添加到表中并一次更新一张表的 CSS。