jQuery addClass 似乎无法在 Internet Explorer 中工作

Question

我整个下午都在试图解决这个问题，但没有成功。在我正在工作的这个网站上（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("calendar-odd-row");
$("tr:nth-child(1)").addClass("calendar-first-row");

然后我在 CSS 中定义了这些类，如下所示（这是仅第一个示例）：

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

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

整个下午都在试图解决这个问题，但没有成功。我在互联网上进行了搜索，但没有得到任何结果。如果有人对此有任何见解，那就太棒了。

谢谢

阿德里安

Answer 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 但同样的原则适用。

Answer 2

而不是：

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

尝试

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

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

IE对于那些它不理解的伪类也有一点小缺陷，因为如果它有一个它不理解的选择器，它会忽略整个规则集

Answer 3

您是否尝试过

$(".post:even")

或

$(".post").even()

（后者需要扩展代码 - 请参阅 api 注释...）

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

Answer 4

使用 Internet Explorer 7 时，我在使用 jQuery :odd & 条带化表格时遇到了麻烦。 ：甚至添加类。另外，需要更改所选行的背景颜色。

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

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

发现了 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  
);  

希望这对某人有帮助