I have been trying to figure this out all afternoon with no luck. On this site I am working on () 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 e up with anything. If anyone has any insight into this that would be fantastic.

Thanks

Adrian

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 e up with anything. If anyone has any insight into this that would be fantastic.

Thanks

Adrian

• javascript
• jquery
• css
• addclass
• css-selectors

4 Answers 4

I can see in the Developer Tools in IE that the class gets added, both in IE7 and IE8 patibility mode.

Perhaps IE is ignoring the line it doesn´t understand, so you could try:

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

or, even better:

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

Edit: By the way, I was looking at .events-odd-row and not .latestpost-even but the same principle applies.

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

Have you tried

$(".post:even")

or

$(".post").even()

(latter would require extended code -- see api ments...)

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

Using Internet Explorer 7, I had the trouble of striping a table using jQuery :odd & :even addClass. Also, needed to change the background color of a selected row.

It would add the class to the row (checked using PageSpy, an inspector of dynamic DOM) but the effect would not be seen.

I needed to add the same class to each cell in the row for it to work.

Discovered jQuery's 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');

and for the selected rows I used a toggle approach:

$('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  
);  

Hope this helps someone