jQuery斑马选择器答案

【问题标题】：jQuery Zebra selectorjQuery斑马选择器
【发布时间】：2010-09-22 04:43:22
【问题描述】：

我有一个名为 grid 的 CSS 类，我将它放在我的桌子上。我想 Zebra 剥离我的偶数行，所以我使用以下 jQuery 代码

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

这基本上是说“将 css 类应用到任何 tr 标签，它的父标签（在任何级别）都有一个网格类。”问题是当我有嵌套表时，子表的 tr 标签也将获得偶数样式。由于我没有用网格类指定子表，所以我不希望它拾取斑马条纹。

如何指定仅在 tr 标签上应用偶数类，这些标签是具有网格类的标签的直接后代？

【问题讨论】：

标签： jquery

【解决方案1】：

有一篇很棒的 jQuery 博客文章，您可能会发现它很有用： Zebra Table Showdown.

这篇文章还包括一个有趣的讨论，讨论如何在大多数其他主要 JavaScript 库中进行斑马条纹。

向下滚动查看 cmets 使用 jQuery 为斑马条纹添加悬停效果。

【讨论】：

【解决方案2】：

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

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

这将选择限制为仅将您的.grid 引导孩子。

【讨论】：