jquery - 使用 jQuery 选择器选择有孩子但没有孙子的项目

Question

我正在尝试选择有子项的列表项，但不选择孙项的列表项。考虑以下结构：

<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>

我像这样隐藏所有子列表：

#parent li > ul {display:none}

当我将鼠标悬停在任何顶级列表项上时，我想将一个类添加到它的 child<ul>而不是它的 grandchild <ul>。所以在上面的树中，我写了<ul>需要添加一个类。

以下选择所有带有子项的列表项：

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

我只需要选择具有子项的顶级列表项，但当我将鼠标悬停在也有子项的孙子项列表项上时，我不希望触发此功能。

我怎样才能做到这一点？

Answer 1

使用后代选择器。

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

这只适用于有孩子的$.hoverIntent()直系孩子。liul

如果您想在ul将鼠标悬停在 上时显示相邻的<a>，那么：

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

将鼠标悬停在顶层<li>，然后将一个类添加到它的直接<ul>子级：

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

Answer 2

这行得通吗？

//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
    }
});