为什么我的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;
});