css - Selecting items with children but not grandchildren using jQuery selectors -

i trying select list items have children, not list items grandchildren. consider following structure:

<ul id="parent">    <li>       <a href="#"></a>       <ul> <!-- add open class -->         <li><a href="#"></a></li>         <li>             <a href="#"></a>             <ul>  <!-- not add class -->                 <li><a href="#"></a></li>             </ul>         </li>       </ul>    <li> </ul> 

i hide children lists so:

#parent li > ul {display:none} 

when hover on top-level list item, add class child <ul> not grandchild <ul>. in tree above wrote <ul> needs class added.

the following selects list items children:

$("#parent li:has(ul)").hoverintent( showsubnav, hidesubnav ); 

i need select top level list items have children not want function trigger when hover on grandchildren list items have children.

how can accomplish this?

use descendent selector.

$("#parent > li:has(ul)").hoverintent( showsubnav, hidesubnav ); 

this $.hoverintent() on immediate children lis have child ul.

if want show adjacent ul when hover on <a>, this:

$('#parent > li > a').hover(function() {     $(this).next('ul').addclass(); }); 

hovering on top level <li> , add class it's immediate <ul> child:

$('#parent > li').hover(function() {     $(this).child('ul').addclass(); });