IE 8支持Odd / Even Zebra样式

Question

Ok, so. I know nth-child([:even|:odd]) isn't supported via IE 8. So now I am stuck trying to come up with a method of applying classes equal to odd/even rows. the way I would using :nth-child . Which I think my method may.. work, however I have an unordered list, with multiple sub unordered lists within, so the zero index seems to be effected by this issue, and doesn't apply correctly

I have a jsFiddle example of whats going on to better show the problem. If you notice for example, the example the LI's with "Header 1" and "Header 2" are at the same level, yet they both get the "even" class.

The goal is for each UL to have its zebra styling applied to its children one level deep, and each subsequent UL and its children do the same. Is anyone able to throw me a bone as to how to fix this? Currently it seems that its going based off the overall DOM indexing, rather than a per UL (if that makes sense).

Answer 1

Something like this?

$('ul > li:nth-child(odd)').addClass('li_odds');
$('ul > li:nth-child(even)').addClass('li_evens');    

jsFiddle example

Answer 2

I think it is worth noting that the problem stems from a small misunderstanding of the css syntax ul > li means "find all li items that are a direct descendant of a ul item. The selected list of items will include all your outer li as well as the inner as they all are direct descendants of a ul . Because of this when jquery is asked to filter by even or odd ( .filter(':odd|:even') ) the list being filtered is larger than you intended and has included items from multiple levels of the DOM hierarchy which causing your striping to occur across multiple levels of the hierarchy rather than on a per ul basis.

The $('ul > li:nth-child(odd|even)') corrects this by limiting the css selection to the list you intend to zebra stripe. The reason this works even in IE8 is because jquery is handling the selection rather than native css and jquery has worked around the IE8 limitation.