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

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

相反,我只希望它在用户点击Discography和Videography时发出警报.

Answer 1

jsFiddle演示

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

PS:以上内容甚至适用于更深层次的嵌套列表!