jQuery: Limiting Select to Direct Children

Given the example below...

<ul id="example_menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li>Menu Item 4</li>
</ul>

This jQuery selector:

$('#example_menu li');

Will return all LI elements within the menu, including the dropdown ones.

To limit your selection to just the "Menu Item X" items and not the dropdowns, use the following selector to limit it to the direct children of #example_menu.

$('#example_menu > li');

That wonderful little > symbol will fix all your problems, as it limits the selector to direct LI elements of the #example_menu.

 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog