IE8和jQuery选择器 [英] IE8 and jQuery selectors

问题描述

今天，我注意到jQuery选择器和addClass（）函数的组合在IE8上不能正常工作。

例如，当我想确保在表中选择偶数行，我写道：

  {
 $（＃table1 tr：nth-​​child（even））。addClass（even）; 
} 
   
 
 
对于CSS，我写道：
 ＃table1 tr：nth- child（even），＃table1 tr.even {
 background-color：＃ff0; 
} 
  
 
 b $ b 
在Firefox，Chrome，Safari和Opera中，即使在CSS文件中没有伪类选择器，也会选择偶数行，但在IE8中并不是这样，有不同的背景颜色。
 
 
 
这是奇怪的，因为当我使用：
  jQuery（document）.ready（function（$）{
 $（＃table1 tr：nth-​​child（even））。css（{background-color：＃ff0}） ; 
} 
  
所选行在IE8中突出显示。
 
 
 
 
 
 
问题的一个例子是可以在这里看到的问题 -   24way示例。在Firefox，Chrome，Safari和Opera中，奇数行分配了一个奇怪类。 
解决方案
在IE8中，选择器在jQuery side ...但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删除）和这是一个固定的示例，带有规则拆分。
 
 
 
 
 
 
为了完整起见， =http://jsfiddle.net/PKr6f/2/ =nofollow noreferrer>像这样 不帮助：
  tr.odd td，tr：nth-​​child（odd）td {
 background-color：＃86B486; 
} 
  
 
Today it came to my attention that a combination of jQuery selectors and the addClass() function does not work properly on IE8.

For example, when I want to ensure that even-numbered rows are selected in a table, I wrote:
jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").addClass("even");
}
And for the CSS, I wrote:
#table1 tr:nth-child(even), #table1 tr.even {
    background-color: #ff0;
}
In Firefox, Chrome, Safari and Opera, even without the pseudo-class selector in the CSS file, even-numbered rows are selected. However, in IE8, it is not the case. The rows don't have a different background color.

This is weird because when I used:
jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"});
}
The selected rows are highlighted in IE8.



An example of the problem is question can be seen here - 24ways example. In Firefox, Chrome, Safari and Opera, the odd rows are assigned an "odd" class. However, in IE8, they are not assigned an "odd" class and are not highlighted.
解决方案
The selector works correctly on the jQuery side...but IE8 discards the style rule entirely (in compliance with the specification) because it doesn't recognize nth-child:
tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}
If you split it, it'll work correctly:
tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}
Here's the original version (a single rule IE8 removes) and here's a fixed sample, with the rule split.



For completeness sake, reversing the rule like this doesn't help:
tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}


                        
这篇关于IE8和jQuery选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！