jQuery addClass 似乎无法在 Internet Explorer 中运行答案

【问题标题】：jQuery addClass appears not to be working in Internet ExplorerjQuery addClass 似乎无法在 Internet Explorer 中运行
【发布时间】：2011-08-25 18:06:18
【问题描述】：

我整个下午都在试图解决这个问题，但没有运气。在我正在处理的这个站点上 (http://chezkoop.ca/united)，我们有几个区域（主页第一列和第二列以及事件页面），它们利用 css 伪选择器:nth-child() 为各个行着色。

显然，nth-child() 在 Internet Explorer 8 及以下版本中不起作用（还没有看过 IE9...），所以我想使用以下方法使用 jQuery 复制此功能（位于 $(document).ready(function(){ 中。 ..});):

$(".post:nth-child(even)").addClass("latestpost-even"); $(".dbem_events_list li:nth-child(2n-1)").addClass("events-odd-row"); $("tr:nth-child(2n+1)").addClass("日历奇行"); $("tr:nth-child(1)").addClass("日历第一行");

然后我像这样在我的 CSS 中定义了这些类（这只是第一个示例）：

.post:nth-child(even), .latestpost-even { 背景颜色：#f5f4e8； }

如果我使用 Firebug 检查 Firefox 中的 DOM，则这些类已正确应用（尽管没有必要，因为我在 Firefox 中）。在 Internet Explorer 8 或 7 中查看页面时，行没有着色（因此可能没有应用类）。

整个下午都在试图解决这个问题，但没有运气。我已经通过互联网进行了搜索，但没有提出任何建议。如果有人对此有任何见解，那就太好了。

谢谢

阿德里安

【问题讨论】：

标签： javascript jquery css addclass css-selectors

【解决方案1】：

我可以在 IE 的开发人员工具中看到，在 IE7 和 IE8 兼容模式下都添加了该类。

也许 IE 忽略了它不理解的行，所以你可以试试：

.post:nth-child(even) {
  background-color: #f5f4e8;
}
.latestpost-even {
  background-color: #f5f4e8;
}

或者，甚至更好：

.latestpost-even, .post:nth-child(even) {
  background-color: #f5f4e8;
}

编辑：顺便说一句，我查看的是.events-odd-row而不是.latestpost-even，但同样的原则也适用。

【讨论】：

这很有意义。不尝试这个感觉像个白痴！感谢您的帮助！

【解决方案2】：

而不是：

.post:nth-child(even), .latestpost-even {
   background-color: #f5f4e8;
}

试试

.post:nth-child(even) {background-color: #f5f4e8;}

.latestpost-even {background-color: #f5f4e8;}

IE 对那些它不理解的伪代码也有一点弱点，如果它有一个它不理解的选择器，它将忽略整个规则集

【讨论】：

谢谢。发挥了魅力。没有弄清楚这一点肯定会觉得有点傻！
不客气，别担心，这只是另一个 IE 弱点，我们应该如何记住它们 ;)

【解决方案3】：

你试过了吗

$(".post:even")

或

$(".post").even()

（后者需要扩展代码——参见 api cmets...）

http://api.jquery.com/even-selector/

【讨论】：

【解决方案4】：

使用 Internet Explorer 7，我在使用 jQuery :odd & :even addClass 条带化表时遇到了麻烦。此外，需要更改所选行的背景颜色。

它会将类添加到行中（使用 PageSpy，一个动态 DOM 的检查器检查），但不会看到效果。

我需要为行中的每个单元格添加相同的类才能使其工作。

发现了 jQuery 的 andSelf。

CSS

.odd{background-color:#fafafa;}

.even{background-color:#f4f4f4;}

.selected_row{background-color:#ff9999;}

Javascript

$('tbody#interest_list_body tr:odd').find('td').andSelf().addClass('odd');      
$('tbody#interest_list_body tr:even').find('td').andSelf().addClass('even');

对于选定的行，我使用了切换方法：

$('tbody#interest_list_body tr').toggle(  
   function(){  
    $('tbody#interest_list_body tr').find('td').andSelf().removeClass('selected_row');  
    if($(this).attr('id')){  
          $(this).find('td').andSelf().addClass('selected_row');  
    } // end if  
    }, // end fn  
   function(){  
          $(this).find('td').andSelf().removeClass('selected_row');  
    } // end fn  
);

希望这对某人有所帮助

【讨论】：