jQuery斑马线选择器

Question

我有一个叫做 grid 的 CSS 类，我将其放在我的表格上。我想给偶数行添加斑马线效果，因此我使用以下 jQuery 代码：

$(".grid tr:nth-child(even)").addClass("even");

这基本上是说，“即使在具有grid类的任何级别的父项中，也将css类应用于任何tr标签。”这样做的问题在于当我有嵌套表格时，子表格的tr标签也会得到奇偶样式。由于我没有指定带有grid类的子表格，因此我不希望它使用斑马线样式。

我该如何指定仅对直接后代tag（其具有grid类）的tr标签应用even类？

- Bob

Answer 1

您想使用不同的选择器，例如子选择器：

$(".grid > tr:nth-child(even)").addClass("even");

这将限制选择仅限于您的.grid直接子元素。

- MrKurt

Answer 2

有一篇很棒的jQuery博客文章，你可能会觉得有用：Zebra Table Showdown。

这篇文章还包括了如何在其他主要JavaScript库中进行斑马线条纹的有趣讨论。

向下滚动以查看使用jQuery添加悬停效果到斑马线条纹的评论。

- dshaw