Question

现在几个小时一直在努力解决这个简单的选择器问题，而且必须缺少明显的东西。我有一个<ul>，其中一些<li>已嵌套<ul> s。每个<li>都包含一个链接，当点击它时我想执行一个函数（而不是导航），但重要的是，这应该只发生在父<ul>中包含的链接而不是任何链接上可能存在于嵌套<ul>中。很简单你会想：

HTML：

<ul>
    <li>
        <a href="dontleavethis.page">A link</a>
        <ul>
            <li><a href="navigate.there">A nested link</a></li>
            <li><a href="navigate.somewhere">Another nested link</a></li>
        </ul>
    </li>
</ul>

jQuery：

$('li:has(ul) a').click(function() { 
    bla bla bla...
    return false;
});

事情是，无论我如何表达我的选择器，我都无法阻止嵌套<ul>中的链接触发点击处理程序。它们显然与选择器的":has(ul)"条件不匹配，但处理程序仍然因某种原因而附加。我在这做错了什么？

Answer 1

$('li:has(ul) > a').click(...)

您的问题是，$('li:has(ul) a')表示a li has内的所有 ul元素，不仅是即时的孩子。

Answer 2

$('ul > li:has(ul) > a').click(function(){
    bla bla bla....
    return false;
});

Answer 3

如果你给顶级链接一个类，你可以直接访问它们，而不需要任何复杂的（ish）选择器逻辑。

Answer 4

你应该给主要的ul一个id，我会用“main”但是你应该试着想一个更具描述性的（为了你自己的利益）。然后你可以使用

$('ul#main > li > a').click(function() { 
    bla bla bla...
    return false;
});

＆gt;将仅选择元素的直接祖先。

CNC中没关系，这也意味着没有ul的li将会有风格。 @ idrumgood的解决方案是最好的。

Answer 5

可能是事件被传播了吗？

怎么样

$('ul > li:has(ul) > a').click(function(event){
  bla bla bla....
  event.stopPropagation();
  return false;
});

为什么我的jQuery选择器选择list元素中的所有锚点？

5 个答案: