为什么我的jQuery选择器选择列表元素中的所有锚?

为什么我的jQuery选择器选择列表元素中的所有锚?,jquery,html,nested,html-lists,css-selectors,Jquery,Html,Nested,Html Lists,Css Selectors,几个小时以来,我一直在努力解决这个简单的选择器问题,一定是遗漏了一些明显的东西。我有一个,其中一些嵌套了s。每个都包含一个链接,单击该链接时,我希望执行一个功能(而不是导航),但重要的是,这应该只发生在父中包含的链接上,而不是嵌套中可能存在的任何链接上。很简单,你会想: HTML: 问题是,无论我如何表达我的选择器,我都无法阻止嵌套的中的链接触发单击处理程序。它们显然与选择器的”:has(ul)标准不匹配,但由于某种原因,处理程序仍然会被附加。我做错了什么 $('ul > li:has(u

几个小时以来,我一直在努力解决这个简单的选择器问题,一定是遗漏了一些明显的东西。我有一个
,其中一些
  • 嵌套了
    s。每个
  • 都包含一个链接,单击该链接时,我希望执行一个功能(而不是导航),但重要的是,这应该只发生在父
    中包含的链接上,而不是嵌套
    中可能存在的任何链接上。很简单,你会想:

    HTML:

    问题是,无论我如何表达我的选择器,我都无法阻止嵌套的
    中的链接触发单击处理程序。它们显然与选择器的
    ”:has(ul)
    标准不匹配,但由于某种原因,处理程序仍然会被附加。我做错了什么

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

    你的问题是
    $('li:has(ul)a')
    意味着
    li
    包含
    ul
    的所有
    a
    元素,而不仅仅是直接的子元素。

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

    您应该给主ul一个id,我将使用“main”,但您应该尝试考虑一个更具描述性的id(为了您自己的利益)。那你就可以用

    $('ul#main > li > a').click(function() { 
        bla bla bla...
        return false;
    });
    
    >将只选择元素的直接祖先

    -编辑-
    没关系,这也意味着没有ul认证的li's将拥有这种风格@idrumgood的解决方案是最好的。

    事件是否会传播

    怎么样

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

    对不起,没有骰子。我从中得到了完全相同的行为。不过还是要谢谢你!嗯,这和你接受的答案完全一样。。。这意味着每一个链接都会插入一个类,这会扰乱html并产生不必要的带宽。只需给父级一个类/id并只选择直接的祖先就更有效了,但是提供的其他选择器依赖于保持一致的DOM结构,这可能会导致前进的困难。类还可以提供一个描述性选择器,使代码更具可读性。啊,这非常有意义!谢谢是的,那当然行。我希望有一种简洁的方法来实现这一点,而不必指定ID或类(列表的父元素已经有了ID)。
    $('li:has(ul) > a').click(...)
    
    $('ul#main > li > a').click(function() { 
        bla bla bla...
        return false;
    });
    
    $('ul > li:has(ul) > a').click(function(event){
      bla bla bla....
      event.stopPropagation();
      return false;
    });