Question

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

显然，nth-child()在Internet Explorer 8中无法正常工作（还没有看过IE9），所以我想使用以下内容在jQuery中复制这个功能（这是放在{{{ 1}} ... $(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＆amp; ：甚至addClass。此外，还需要更改所选行的背景颜色。

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

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

发现了jQuery和自己。

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  
);

希望这有助于某人

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

4 个答案: