Question

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

我有jsFiddle example的最新情况，以便更好地展示问题。例如，如果您注意到，带有“Header 1”和“Header 2”的LI的示例处于同一级别，但它们都获得“偶数”类。

目标是让每个UL将其斑马造型应用于其深度为一级的儿童，并且每个后续的UL及其子女都会这样做。是否有人能够告诉我如何解决这个问题？目前似乎它的基础是整体DOM索引，而不是每个UL（如果这是有道理的）。

Answer 1

这样的东西？

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

jsFiddle example

Answer 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限制。

IE 8支持Odd / Even Zebra样式

2 个答案: