使用 MooTools 迭代 <ul> 列表答案

【问题标题】：Iterating an <ul> list using MooTools使用 MooTools 迭代 <ul> 列表
【发布时间】：2012-09-22 21:14:53
【问题描述】：

我正在尝试迭代下面的列表：

<ul>
  <li class="tab">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
</ul>

使用以下 MooTools 脚本：

$$('ul').getElements().each(function(el,i) {
    alert(i);
});

我只看到“0”出现在屏幕上，而我期待“0”、“1”、“2”。谁能解释一下？

【问题讨论】：

【解决方案1】：

$$('ul') 返回ul 元素的列表。如果您随后在该列表上调用getElements，则需要指定标签名称。这将为您提供li 元素列表的列表：[[li, li, li]]。
因此，如果您想遍历 li 元素，您可以执行以下操作：

 $$('ul').getElements('li')[0].each(function (el, i) { alert(i); });

或：

$$('ul li').each(function(li, index){
    // faster. 
});

【讨论】：

$$ 不是遍历整个 DOM 吗？不知道@Ben 代码的上下文，我不能肯定地说，但我几乎总是给ul 一个id 属性并通过document.id 选择它，或者使用.getElement() 从包含父元素。
$$ 不会像这样遍历整个 dom，并非总是如此 - 例如。 $$('#id ul li') 也将比 document.id('id').getElements('ul li') 快。在他的情况下，是的，它将获得整个 dom 的所有 ul li 组合。 QSA 处理得很好。 getElementsByTagName 后备。我认为这是伪代码，他实际上是锚点......