Question

What is the correct method for looping through the lowest level “li” elements?

<div id="mainnav">
    <ul>
        <li>
            <ul>
                <!-- These are the elements I want to loop through -->
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <!-- End These are the elements I want to loop through -->
            </ul>
        </li>
    </ul>
</div>

I’ve tried this but the selector is not firing.

jQuery("#mainNav > ul > li > ul > li").each(function () { 

});

Answer 1

#ID selectors are case sensitive, you need #mainnav (lower case n), like this:

jQuery("#mainnav > ul > li > ul > li").each(function () { 

});

You can test it out here.