为啥这个 jquery 和 css 在 html 表中不一致？

Posted 2023-05-09

【中文标题】为啥这个 jquery 和 css 在 html 表中不一致？

【英文标题】：Why isn't this jquery and css consistent across html tables?为什么这个 jquery 和 css 在 html 表中不一致？

【发布时间】：2014-01-22 11:54:24

【问题描述】：

我有以下 jquery 代码和：

$("table.altRow > tbody > tr:odd").addClass("oddColor");
$("table.altRow > tbody > tr:even").addClass("evenColor");

还有下面的css：

.altRow tbody tr.evenColor  background-color : #e9e9e9; 
.altRow tbody tr.oddColor  background-color : #ffffff; 

而且它似乎呈现出不一致的结果

有些表格在第一个主体 TR 中的类上具有“evenColor”，而另一些表格在第一个主体 TR 中作为一个类添加了“oddColor”。

有什么理由会不一致？我希望白色 (#ffffff) 行始终是第一行背景色

如果我在一个页面上有两个表格。一个将 evenColor 放在一个的第一行，另一个 table 将oddColor 作为另一个 table 的第一行的类。

有什么建议吗？

【问题讨论】：

只是想知道，但是你为什么不使用 CSS 伪选择器，比如 .altRow tbody tr:nthchild(even)，那它仍然会出现同样的问题吗？

你能展示你的相关（最小/SSCCE）html吗？如果可能的话，还有一个JS Fiddle 或类似的演示供我们使用？

也许 jQuery 将第一行视为“0”（偶数）而 CSS 将其视为“1”（奇数）？

正如我之前的评论中提到的，我是正确的，正如您在这个 JSFiddle jsfiddle.net/qV9nx

中看到的那样

【参考方案1】：

这是因为 jQuery 的 :odd and :even selectors 适用于所有选定元素的列表，无论它们在上下文中的位置如何。

如果你想使用 jQuery，请改用:nth-child(odd) and :nth-child(even)，这样：

$(".altRow tbody tr:nth-child(odd)").addClass("oddColor");
$(".altRow tbody tr:nth-child(even)").addClass("evenColor");

性能提示

简化您的选择器，它们不需要那么长。如果您将 altRow 类应用到 <tbody>，您可以使用像 .altRow tr:nth-child(even) 这样的选择器

只使用 CSS，不使用 jQuery：

.altRow tr  background-color : #e9e9e9;  
.altRow tr:nth-child(odd)  background-color : #ffffff;  

在 IE8- 中，:nth-child 仅支持使用 Selectivizr 或类似的库。

【讨论】：

是的，它适用于 IE8 的 jQuery 选择器。如果您将 Selectivizr 添加到页面中，它也可以在 CSS 选择器 中使用

另一个性能提示是只使用一个而不是两个 :nth-child 选择器。所以，tr color: #e9e9e9 和 tr:nth-child(odd) color: #fff 。

注意：即使他们不将该类应用于 TBODY，他们也可以使用该选择器。选择器中的空格表示祖先，而不是严格的父子关系。

你是对的@ŠimeVidas！你可以只有一个:nth-child()，我更新了答案。但是不需要添加 jQuery 版本，使用 Selectivizr 就可以了。

@leora 的表现是非常相对的。在现代计算机上的 Chrome 中，差异几乎没有关系。网络性能的问题在于这些小东西的数量和设备。当您开始在手机或 IE8 中的复杂页面上出现数千个“几乎不明显的性能损失”时，您会感觉页面滞后，并且可能节省的任何毫秒都可以改善体验。我不会花时间在旧网站上优化选择器，但如果您现在正在编写它们，为什么要使用更慢（并且编写时间更长）的版本？

【参考方案2】：

:odd 选择元素，而不是相对于它们的父元素（如在其表中的第 n 个 tr 中），而是在整个 DOM 中。

如果你想要一个例子，看看这个：http://jsfiddle.net/PGdMz/

如果你不明白，请阅读 jQuery 网站的这段摘录：

In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

所以你应该做的是这样写：

$("table.altRow > tbody > tr:nth-child(odd)").addClass("oddColor");
$("table.altRow > tbody > tr:nth-child(even)").addClass("evenColor");

如果我在示例中更新它：

http://jsfiddle.net/PGdMz/1/

【讨论】：

那是因为IE8不支持这个