1

如果你像这样创建 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') 你会得到所有四个 li 元素与'a'类..真的很奇怪..但我是mootools的新手，也许我做错了什么..

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

$$('.a').filter(function(item, index) { return index%2; }

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

4

4 回答 4

2

问题在于 :odd 和 :even （以及它们的 CSS 表亲 :nth-child(odd) 和 :nth-child(even)）指的是元素作为其父级的子级出现的顺序，而不是作为子级的顺序特定的选择器。

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

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

编辑：看来您已经在问题中涵盖了这一点，请在完全阅读之前回答我。

于 2009-01-26T02:04:32.257 回答
0

如果你想获得第一个和第三个，你只需要 $$('.a')。

您是否要获得第 1 项和第 5 项？这将类似于 $$('a:nth-child(4n+1))

我假设 mootools 使用css3 结构伪类

于 2009-01-26T02:00:46.337 回答
0

:nth-child 伪选择器查看 DOM 元素的（非零索引）索引，而不是在选定（匹配）元素内。MooTools 添加了':odd'选择器来选择 'real' 奇数元素，因此索引从 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 类扩展选择器引擎（目前找不到示例）。

于 2009-05-15T19:14:29.287 回答
-1

没眼皮，所以你说这不是虫子？它应该工作的方式？

于 2009-01-26T02:16:24.167 回答