8065

by rwaldron

HTML

<!-- #menu>ul>li>ul>li>a -->
<div id="menu">
  <ul>
    <li><a href="#a">alpha</a></li>
    <li><a href="#b">beta</a></li>
    <li>
      <ul>
        <li><a href="#g">gamma</a></li>
        <li><a href="#d">delta</a></li>
      </ul>
    </li>
  </ul>
</div>

JavaScript

var menu = $("#menu"), 
    topMenu = menu.children("ul"), 
    topMenuItems = topMenu.children(), 
    topMenuItemLinks = topMenuItems.children("a"), 
    subMenus = topMenu.find("ul"), 
    subMenuItems = subMenus.children(), 
    subMenuItemLinks = subMenuItems.children("a"); 

console.log("menu", menu);
console.log("topMenu", topMenu);
console.log("topMenuItems", topMenuItems);
console.log("topMenuItemLinks", topMenuItemLinks);
console.log("subMenus", subMenus);
console.log("subMenuItems", subMenuItems);
console.log("subMenuItemLinks", subMenuItemLinks);

(function initHovers() {
  
    // these are the same thing - why not use subMenuItems.hover(function(){...})
  console.log(subMenuItems, subMenuItemLinks.parent() )

  subMenuItemLinks.parent().hover(function(){/*Snip*/});

})();