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中，奇数行被分配了一个“奇数”类。但是，在IE8中，它们没有被分配“奇数”类，也没有突出显示。

Answer 1

选择器在jQuery端正常工作......但是IE8完全丢弃了样式规则（符合the specification），因为它无法识别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;
}

Here's the original version（单个规则IE8删除）和here's a fixed sample，规则拆分。

---

为了完整起见，撤销规则like this 不会帮助：

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

Answer 2

这对我来说在ie8和ie9中首先你需要2个带背景色的课程

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

然后用jquery找到tr：odd add tr：even并添加相应的类

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