Mootools - 使用 .each 选择器定位子元素答案

【问题标题】：Mootools - Targeting child elements with an .each selectorMootools - 使用 .each 选择器定位子元素
【发布时间】：2011-11-19 18:57:04
【问题描述】：

我正在尝试以 LI 内的 UL 为目标，但遇到了问题。这是 HTML：

<ul id="main_nav">
  <li class="main"><a href="#">Section 1</a>
    <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li class="main"><a href="#">Section 2</a>
    <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li class="main"><a href="#">Section 3</a></span>
   <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

这是 JS：

    window.addEvent('load', function() {
    $$('li.main').each(function(el){
    el.getChild('dropdown').addEvent('mouseenter',function(e){
        alert("over!");
    });
    el.getChild('dropdown').addEvent('mouseleave',function(e){
        alert("out!");
    });
});
}

我认为问题在于当我尝试使用 el.getChild('dropdown') 来获取 LI 的孩子时，但我不知道有任何其他方法可以做到这一点。我不是编码员，因此不胜感激。谢谢！

【问题讨论】：

标签： css-selectors mootools targeting

【解决方案1】：

可能导致问题的是您的重复 ID。 id 只能在整个页面中使用一次。因此，超过 1 个<ul id="dropdown"> 是无效的 HTML，并且可能会给您带来不需要的库结果。

如果您想保留重复项，请尝试使用 name 或 class 属性。

现在，我不确定它是否会在不同版本之间发生变化，但我只能在文档中找到 plural getChildren。

window.addEvent('load', function() {
    $$('li.main').each(function(el){
        el.getChildren('.dropdown').addEvent('mouseenter',function(e){
            alert("over!");
        });
        el.getChildren('.dropdown').addEvent('mouseleave',function(e){
            alert("out!");
        });
    });
});

但是，话说回来，我对 Mootools 不是很熟悉。
正如你可能知道的那样。 ;)

【讨论】：

【解决方案2】：

您可以使用 getFirst 方法代替 getChild：

window.addEvent('load', function() {
    $$('li.main').each(function(el){
        el.getFirst().addEvent('mouseenter',function(e){
            alert("over!");
        });
        el.getFirst().addEvent('mouseleave',function(e){
            alert("out!");
        });
    });
});

【讨论】：