jquery - 仅定位选择器中具有子菜单的链接

Question

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Discography</a>
        <ul>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>
    <li><a href="#">Videography</a>
        <ul>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
</ul>

我想获取 jquery 选择器中具有子菜单的主链接。我不想抓取子菜单链接。我只想要有子菜单的主链接。

我尝试了下面的选择器，但它为我提供了所有主要链接(主页、唱片目录、录像、关于)。

$("#nav > li > a").click(function() {
    alert("click called");
});

相反，我只希望它在用户单击“唱片目录和录像”时发出警报。

Answer 1

jsFiddle demo

$("#nav li:has(ul) > a").click(function() {
    alert("click called");
});

P.S:以上内容甚至适用于更深的嵌套列表!