jQuery addClass似乎无法在Internet Explorer中运行(jQuery addClass appears not to be working in Internet Explorer)

我整个下午都试图弄清楚这一点，没有运气。 在我正在工作的这个网站上（ 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中查看页面时，行未着色（因此可能未应用类）。

一整个下午都试图弄清楚这一点没有运气。 我已经通过互联网进行了搜索，并没有想出任何东西。 如果有人对此有任何见解，这将是太棒了。

谢谢

阿德里安

I have been trying to figure this out all afternoon with no luck. On this site I am working on (http://chezkoop.ca/united) we have a couple of areas (homepage columns one and two and the events page) which utilize the css pseudo selector :nth-child() to colour various rows.

Obviously, nth-child() does not work in Internet Explorer 8 and down (haven't looked at IE9 yet...) so I want to replicate this functionality with jQuery using the following (this being place inside $(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");

I have then defined those classes in my CSS like this (this is the first example only):

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

If I check the DOM in Firefox with Firebug these classes have been applied correctly (although unnecessarily, because I'm in Firefox). When viewing the page in Internet Explorer 8 or 7, the rows are not coloured (so presumably the classes are not being applied).

Been trying to figure this out all afternoon with no luck. I've had a search through the interwebs and haven't come up with anything. If anyone has any insight into this that would be fantastic.

Thanks

Adrian

最满意答案

代替 ：

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

尝试

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

IE也有一些不明显的错误，它不会理解，如果它有一个它不理解的选择器，它会忽略整个规则集

instead of :

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

try

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

IE also has a little foible with those pseudos that it doesn't understand in that it will ignore the whole ruleset if it has a selector it doesn't understand

jQuery addClass似乎无法在Internet Explorer中运行(jQuery addClass appears not to be working in Internet Explorer)

我整个下午都试图弄清楚这一点，没有运气。 在我正在工作的这个网站上（ 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中查看页面时，行未着色（因此可能未应用类）。

一整个下午都试图弄清楚这一点没有运气。 我已经通过互联网进行了搜索，并没有想出任何东西。 如果有人对此有任何见解，这将是太棒了。

谢谢

阿德里安

I have been trying to figure this out all afternoon with no luck. On this site I am working on (http://chezkoop.ca/united) we have a couple of areas (homepage columns one and two and the events page) which utilize the css pseudo selector :nth-child() to colour various rows.

Obviously, nth-child() does not work in Internet Explorer 8 and down (haven't looked at IE9 yet...) so I want to replicate this functionality with jQuery using the following (this being place inside $(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");

I have then defined those classes in my CSS like this (this is the first example only):

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

If I check the DOM in Firefox with Firebug these classes have been applied correctly (although unnecessarily, because I'm in Firefox). When viewing the page in Internet Explorer 8 or 7, the rows are not coloured (so presumably the classes are not being applied).

Been trying to figure this out all afternoon with no luck. I've had a search through the interwebs and haven't come up with anything. If anyone has any insight into this that would be fantastic.

Thanks

Adrian

最满意答案

代替 ：

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

尝试

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

IE也有一些不明显的错误，它不会理解，如果它有一个它不理解的选择器，它会忽略整个规则集

instead of :

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

try

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

IE also has a little foible with those pseudos that it doesn't understand in that it will ignore the whole ruleset if it has a selector it doesn't understand