4

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

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

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

4

2 回答 2

2

像这样的东西？

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

jsFiddle 示例

于 2013-03-28T19:11:48.970 回答
1

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

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

于 2013-03-28T19:37:38.407 回答