Question

如果你像这样创建html布局

<ul>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
</ul>

并尝试选择带有'a'类的奇数元素，例如$$（'。a：odd'）你会得到空数组，如果你做$$（'。a：even'）你会得到所有带有'a'类的四个li元素..真的很奇怪..但是我对mootools很新，也许我做错了什么..

所以我的问题是如何用类选择第一个和第三个li元素。我知道我可以用这样的功能来做到这一点

$$（'。a'）。filter（function（item，index）{return index％2;}

但是对于选择奇数或偶数元素这样的小任务来说太复杂了。

Answer 1

问题是：odd和：even（和他们的CSS表兄弟：nth-child（奇数）和：nth-child（偶数））指的是元素作为父元素的子元素出现的顺序，而不是有特定选择的孩子。

这对我有用（Prototype，但看起来像MooTools有类似的语法）：

var odd = $$('.a').filter(function(item, index) {
    return index % 2 == 0;
});
var even = $$('.a').filter(function(item, index) {
    return index % 2 == 1;
});

编辑：似乎你已经在问题中已经涵盖了这个问题，在完全阅读之前，请嘘我回答。

Answer 2

如果你想获得第一和第三，你只需要$$（'。a'）。

您是否想要获得第1和第5项？这就像$$（'a：nth-child（4n + 1））

我假设mootools使用css3 Structural pseudo-classes

Answer 3

eyelidlessness ，所以你说这不是一个bug？它应该如何运作？

Answer 4

：nth-child伪选择器查看DOM元素的(non-zero indexed) index，而不是选定的（匹配）元素。 MooTools添加':odd'选择器来选择'真实'奇数元素，因此索引从0开始。

所以在你的例子中，选择'.a：nth-child（odd）'将返回所有li.a元素，因为索引从1开始。选择'.a：odd'什么都不选，因为没有'真正的'奇怪的li.a元素。

您可能想要的是选择':nth-of-type'元素。因此选择'.a：nth-of-type（odd）'将返回所有奇数li.a元素（第一个和第三个元素 - 它使用DOM元素的索引）。

默认情况下，MooTools不支持'：nth-of-type'选择器，但您可以使用Selectors.Pseudo类扩展选择器引擎（现在无法找到示例）。

如何根据类名选择偶数或奇数元素

4 个答案: