使用jQuery选择器选择有子项而不是子项的项目

Question

I am trying to select list items that have children, but not list items that are grandchildren. Consider the following structure:

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

I hide all children lists like so:

#parent li > ul {display:none}

When I hover over any top-level list item, I would like to add a class to its child <ul> but NOT its grandchild <ul> . So in the tree above I wrote the <ul> that needs a class added.

The following selects all list items with children:

$("#parent li:has(ul)").hoverIntent( showSubNav, hideSubNav );

I need this to ONLY select the top level list items that HAVE children but I do not want this function to trigger when I hover over grandchildren list items that also have children.

How can I accomplish this?

Answer 1

Use a descendent selector.

$("#parent > li:has(ul)").hoverIntent( showSubNav, hideSubNav );

This will only do $.hoverIntent() on immediate children li s that have a child ul .

If you want to show the adjacent ul when you hover over the <a> , then this:

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

Hovering over a top level <li> and then add a class to it's immediate <ul> child:

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

Answer 2

would this work?

//find the first UL in #parent
$('#parent').find('ul').first().each(function(){
    //check if the first UL has any children
    if($(this).find('ul').length > 0){
        //this ul has children UL
    }
    else{
        //this does not have children UL
    }
});