IE 8 支持奇数/偶数斑马样式答案

【问题标题】：IE 8 Support for Odd/Even Zebra StylingIE 8 支持奇数/偶数斑马样式
【发布时间】：2013-03-28 18:54:22
【问题描述】：

好的，所以。我知道 IE 8 不支持nth-child([:even|:odd])。所以现在我被困在试图想出一种方法来应用等于奇数/偶数行的类。我会使用:nth-child 的方式。我认为我的方法可能..有效，但是我有一个无序列表，其中包含多个子无序列表，因此零索引似乎受到此问题的影响，并且不能正确应用

我有一个jsFiddle example 正在发生的事情，以便更好地显示问题。例如，如果您注意到，带有“Header 1”和“Header 2”的 LI 的示例处于同一级别，但它们都获得了“偶数”类。

目标是每个 UL 将其斑马样式应用于其子级的深度一层，并且每个后续 UL 及其子级都这样做。有人能告诉我如何解决这个问题吗？目前，它似乎基于整体 DOM 索引，而不是每个 UL（如果有意义的话）。

【问题讨论】：

是的，它们确实如此......但是它们按照 DOM 的顺序排列，所以即使我的 LI 处于同一级别，它们中的 UL 和 LI 也会以某种方式摆脱索引。
你可以使用后代选择器来过滤它，像这样：#parent > ul > li:nth-child(even)
jsfiddle.net/ozzy_og_kush/YLY3G/2
你见过code.google.com/p/ie7-js 吗？
不，但乍一看，这很棒。谢谢你。我可能会从这里开始，至少在较新的项目上使用这个

标签： javascript jquery html css dom

【解决方案1】：

这样的？

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

jsFiddle example

【讨论】：

【解决方案2】：

我认为值得注意的是，问题源于对 css 语法 ul > li 的一个小误解，意思是“查找所有 li 项目，它们是 ul 项目的直接后代。选定的项目列表将包括所有外部 li 以及内部，因为它们都是 ul 的直接后代。因此，当 jquery 被要求按偶数或奇数（.filter(':odd|:even')）过滤时，被过滤的列表比您预期的要大，并且已包含来自 DOM 层次结构的多个级别的项目，这导致您的条带化发生在层次结构的多个级别上，而不是基于每个 ul。

$('ul > li:nth-child(odd|even)') 通过将 css 选择限制为您打算斑马条纹的列表来纠正此问题。即使在 IE8 中也能正常工作的原因是 jquery 正在处理选择而不是原生 css，并且 jquery 已经解决了 IE8 的限制。

【讨论】：