IE8和jQuery选择器

Question

今天我注意到，jQuery选择器和addClass()函数的组合在IE8上无法正常工作。

例如，在表格中选定偶数行时，我编写了以下代码：

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").addClass("even");
}

至于CSS，我编写了：

#table1 tr:nth-child(even), #table1 tr.even {
    background-color: #ff0;
}

在Firefox、Chrome、Safari和Opera中，即使CSS文件中没有伪类选择器，偶数行也会被选中。然而，在IE8中并非如此。这些行没有不同的背景颜色。

这很奇怪，因为当我使用：

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"});
}

在IE8中，所选行会被高亮显示。

---

问题的一个示例可以在这里看到-24ways example。在Firefox、Chrome、Safari和Opera中，奇数行被分配了一个“odd”类。然而，在IE8中，它们没有被分配“odd”类，也没有被高亮显示。

- Terry

Answer 1

在jQuery端，选择器的工作是正确的...但是IE8完全丢弃了样式规则（遵循规范），因为它不识别nth-child：

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

如果你将它分割，它就会正常工作：

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

这是原始版本（被IE8移除了一个单一规则），这是已修复的示例，规则已分裂。

---

为了完整起见，像这样反转规则并不能有所帮助：

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}

- Nick Craver

---

Nick，非常感谢你的修复。它像魔法一样奏效。确实令人困惑为什么IE8会这样行事，因为对于其他伪选择器这种情况并没有发生。例如，在jQuery中使用first-child和last-child伪选择器时，它仍然按预期工作。再次感谢！ - Terry

@teddyrised - 欢迎 :) 我不确定为什么IE会这样行事，我只会将其添加到它做错的50,000件事情清单中。另外，请确保接受答案以关闭问题/帮助下一个在Google上找到此问题的人 - 通过左侧的复选标记 :) - Nick Craver

啊，非常感谢您的帮助。虽然我一直在潜水，但我仍然是 Stack Overflow 的新手。谢谢！ - Terry

IE8 在这里实际上遵循了样式表中选择器的解析标准。由于它不支持 :nth-child()，因此必须完全丢弃整个 CSS 规则。 - BoltClock

Answer 2

这在IE8和IE9中适用，首先您需要使用具有背景颜色的2个类

.even { background-color: white; } 
.odd { background-color: #ff0; }

然后使用jQuery查找tr:odd，添加tr:even并添加相应的类。

$(document).ready(function () {
        $('#table1').find('tr:odd').addClass("odd"); 
        $('#table1').find('tr:even').addClass("even"); 
});

- Pedro Pacheco