Selecting only first-level elements in jquery

Question

How can I select the link elements of only the parent <ul> from a list like this?

<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a>   <ul>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>   </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> 

So in css ul li a, but not ul li ul li a

Thanks

Answer 1

$("ul > li a") 

But you would need to set a class on the root ul if you specifically want to target the outermost ul:

<ul class="rootlist"> ... 

Then it's:

$("ul.rootlist > li a").... 

Another way of making sure you only have the root li elements:

$("ul > li a").not("ul li ul a") 

It looks kludgy, but it should do the trick

Answer 2

Once you have the initial ul, you can use the children() method, which will only consider the immediate children of the element. As @activa points out, one way to easily select the root element is to give it a class or an id. The following assumes you have a root ul with id root.

$('ul#root').children('li');