jQuery跨多个表的交替行颜色

我注意到严格使用jquery交替行颜色的问题。 你可以看看这个小提琴 ，看一下我将要描述的例子。

我正在使用CSS3来控制表格上的条带化，这些表格在多个表格中按预期工作。

.table-zebra tbody > tr:nth-child(even) > td {background-color: lightgrey;} 

每个偶数行都是浅灰色条纹。 计数从第一行开始。

对于不支持CSS3的浏览器，我使用jquery来模仿这个:( .table-striped用于此示例以显示小提琴的差异）

  $(".table-striped tr:odd").css("background-color", 'lightgrey'); 

当我有多个具有奇数行的表时，jquery将继续前一个表的计数，这会错误地交替行。

除了使用$ .each之外，还有一种更简单的方法可以在jquery中处理它吗？

Answer 1

据我所知， :odd应用于所有

，因此你得到你描述的行为。 我不认为有任何方法可以改变它并使:odd相对于当前.table-striped :odd除了使用.each() 。

对于这种特殊情况，虽然有一个解决方法:nth-child ：

 $(".table-striped tr:nth-child(:odd)").css("background-color", 'lightgrey'); 

虽然如果特定

是其直接父项的奇数子项，则适用，因此如果

包含多个

s，则可能会执行错误操作。

Answer 2

CSS：

 tr.even td { background-color: green; } tr.odd td { background-color: yellow; } 

JS：

  $('.table-striped > tbody').each(function () { $('tr:odd', this).addClass('odd').removeClass('even'); $('tr:even', this).addClass('even').removeClass('odd'); }); 

在这里演示