Question

The markup below is an example of a dynamically generated menu that is styled with css as a flyout. I’m just trying to add arrows to show where menus have child menus.

Is it possible, via jQuery, to add a class (“hasChild top”) to the top level elements that have submenus and a class (“hasChild sub”) to the lower level elements that have children?

<ul id="menu-site-menu">
    <li"><a href="#">About Us</a>
        <ul class="sub-menu">
            <li><a href="#">Our Charity Partners</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </li>
    <li><a href="#">Buy Apparel</a>
        <ul class="sub-menu">
            <li><a href="#">Benevolent Elephant</a>
                <ul class="sub-menu">
                    <li><a href="#">Benevolent Elephant Short Sleeve</a></li>
                    <li><a href="#">Benevolent Elephant Long Sleeve</a></li>
                </ul>
            </li>
            <li><a href="#">Eagle-Spirit</a>
                <ul class="sub-menu">
                    <li><a href="#">Eagle-Spirit Short Sleeve</a></li>
                    <li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Customer Service</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

So. in this example, the jQuery would add the “hasChild top” class to “About Us” and “Buy Apparel”

It would add the “hasChild sub” class to “Benevolent Elephant” and “Eagle Spirit”

Answer 1

var topLevel = $("ul.nav.menu > li").has("ul");
topLevel.addClass("hasChild top");
topLevel.find("li").has("ul").addClass("hasChild sub");

That is, find the li elements that are direct descendants of the top ul, then use .has() to narrow it down to only those that contain a child ul. Give them the “hasChild top” classes. Then, within those top level ones use .find() in combination with .has() to get all lower level menus (no matter how deeply nested) and give them the “hasChild sub” classes.