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}

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

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

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

我需要这个才能只选择有孩子的顶级列表项，但是当我将鼠标悬停在同时拥有子项的孙子列表项时，我不希望触发此功能。

我该如何做到这一点？

Answer 1

使用后代选择器。

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

对于有孩子$.hoverIntent()的直接孩子li，这只会ul。

如果您想将鼠标悬停在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
    }
});

使用jQuery选择器选择具有子项但不包括孙子项的项目

2 个答案: