How can I exclude these elements from a jQuery selection?
css-selectors, jquery
Solution
This will probably work:
$("ul.dropdown > li > ul").slideDown("slow");
">" means only direct children (http://docs.jquery.com/Selectors/child#parentchild). So as long as your heirarchy is like this (which, after your edit just now, it appears it does):
<ul>
<li>
<ul>
..
it will most likely work. Hopefully relevant variations are obvious...
Problem
My jQuery: ``` $("ul.dropdown ul").slideDown("slow"); $("ul.dropdown ul ul").children().hide(); ``` That causes the ones that match the second selector to display for a brief time. How can I exclude the second set from the first set, and only show the first set? My HTML: ``` <ul class="dropdown"> <li style="margin: 0px"> <span id="header"> <img src="back.gif" alt='background' style="border:none;" /> <span style="position: absolute; top: 5px; left: 2px;"> <img src="button.gif" style="border:none;" /> </span> <span style=" position: absolute; top: -5px; left: 70px;"> <p style="background-color: white; width: 200px; height: 20px; font-size: 1.2em; border: 2px solid blue">Menu</p> </span> </span> <ul class="sub_menu"> <li><a href="#">Artificial Turf</a></li> <li><a href="#">blah</a></li> <li id="1"> <a id="1.1" href="#">Batting Cages</a> <ul id="2"> <li><a href="#">Indoor</a></li> <li><a href="#">Outdoor</a></li> </ul> </li> <li><a href="#">Benches & Bleachers</a></li> <li><a href="#">Communication Devices</a></li> <li><a href="#">Dugouts</a></li> <li><a href="#">Fencing & Windscreen</a></li> <li><a href="#">Floor Protectors</a></li> <li><a href="#">Foul Poles</a></li> <li><a href="#">Netting</a></li> <li><a href="#">Outdoor Furniture & Storage</a></li> <li><a href="#">Outdoor Signs</a></li> <li><a href="#">Padding</a></li> <li><a href="#">Scoreboards</a></li> <li><a href="#">Shade Structures</a></li> <li><a href="#"> - VIEW ALL - </a></li> </ul> </li> </ul> ```