Mootools - Targeting child elements with an .each selector

Question

I'm trying to target a UL that's inside a LI and I'm having trouble. Here's the 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>

and here's the 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!");
    });
});
}

I think the problem is when I try to get the child of the LI by using el.getChild('dropdown'), but I don't know any other ways to do this. I'm not a coder so any help is appreciated. Thanks!

Answer 1

Something that may be causing issues are your duplicate ids. An id should only be used once throughout the page. So, having more than 1 <ul id="dropdown"> is invalid HTML and may give you unwanted results with libraries.

If you want to keep duplicates, try name or class attributes.

Now, I'm not sure if it might've changed between releases, but I'm only finding the plural getChildren in the docs.

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!");
        });
    });
});

But, then again, I'm not very familiar with Mootools.
As you can probably tell. ;)

Answer 2

You could use the getFirst-method instead of 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!");
        });
    });
});