为多个表着色奇数行

Question

如果我在页面上有多个表，并且我尝试着色奇数行，那么当jQuery确定哪些行是奇数时，jQuery似乎将整个TR组（来自所有表）合并在一起。

参见示例：http://jsfiddle.net/ryjennings/KNmuQ/5/

有没有办法阻止jQuery执行此操作并单独处理每个表？

Answer 1

你可以这样做：

$(document).ready(function() {
    $("table").find("TR:even").addClass("odd");
});

基本上，您的原始选择器正在抓取页面上tr个元素中包含的所有table元素的一组，这些元素就是所有元素，然后再抓取其中的所有元素。新的选择器系列首先创建一组所有表，然后创建每个表中的行的子组，然后获取每个子组中的每个其他行。

Answer 2

你不应该使用Javascript来处理你可以用CSS做的任何事情。 CSS的速度要快几个数量级。您需要的是:nth-child psudo-class：

tr:nth-child(odd) { background:#f5f6f8; }

See Fiddle.

Answer 3

这是你可以做到的一种方式：

$("table").each(function(){
    $("tr:even", this).addClass("odd");
});

Answer 4

$(document).ready(function() {
    $("table").each(function(){
        $(this).find('TR:even').addClass("odd");
    });
});

Answer 5

这个处理相对于父表的行，而不是你正在使用的代码...

$(document).ready(function() {
    $("tr:nth-child(even)").each(function() {
        $(this).addClass('odd');
    });
});