什么 JQuery 选择器会排除与给定选择器匹配的父项的项目?
Posted
技术标签:
【中文标题】什么 JQuery 选择器会排除与给定选择器匹配的父项的项目?【英文标题】:What JQuery selector excludes items with a parent that matches a given selector? 【发布时间】:2010-11-01 05:41:09 【问题描述】:我有
var $set = $('.foo,.bar').filter(
function() return $(this).parents('.baz').length < 1;);
作为选择类为foo
或bar
的所有元素的一种方式,这些元素不是类为baz
的元素的后代。是否有一个选择器可以在不需要过滤 lambda 的情况下完成相同的事情?
<div class='foo'/><!--match this-->
<div class='bar'/><!--match this-->
<div class='baz'>
<div class='foo'/> <!--don't match this-->
</div>
【问题讨论】:
您可以使用closest
方法而不是parents
使其更快。 closest
一旦找到匹配元素就停止查找,而 parents
沿着 DOM 树向上移动到文档的根元素以查找匹配元素。
【参考方案1】:
事情的真相是,jQuery 根本没有一种特别优雅的方式来做你想做的事。虽然混乱的答案确实有效,但您必须想知道复杂的选择器(与复杂网页中的选择器一样慢)是否值得您拥有更详细但更快的过滤器功能。这没什么大不了的,我个人只是厌倦了特别长、复杂的选择器,但我可以避免它。
另一种选择是创建自己的选择器,因为 jQuery 很棒:
jQuery.expr[':'].parents = function(a,i,m)
return jQuery(a).parents(m[3]).length < 1;
;
$('.foo,.bar').filter(':parents(.baz)');
expr
映射是 Sizzle 选择器引擎的一部分,可在此处找到文档:Sizzle Custom Pseudo-Selectors
【讨论】:
接受,因为它比混乱更完整' - 我在哪里可以找到 expr 数组的 API 文档? 据我所知,真的没有。 这很整洁,尽管我想我可能会将表达式名称更改为 noparents,因为这样可以更好地描述它正在做的事情。 该 JSBin 的链接与答案不匹配。时间久了,应该是回收了网址吧。 我在这个答案上添加了对expr
文档的引用。【参考方案2】:
$('.foo:not(.baz .foo),.bar:not(.baz .bar)')
【讨论】:
【参考方案3】:我无法让它工作:
$(".children:not(#parent .children)");
但我可以让它工作:
$(".children").not($("#parent .children"));
注意:不确定这是否与我使用 1.2.6 的 jQuery 版本有关
【讨论】:
使用$().not()
是最简单的解决方案。并且很好 documented 做被要求做的事情。【参考方案4】:
试试这个:
$('div').filter(function ()
return ($(this).parent().not('.baz'));
)
【讨论】:
【参考方案5】:chaos 提供的选择器应该可以工作:
$('.foo:not(.baz .foo),.bar:not(.baz .bar)')
只是想给你一个关于 FireBug 扩展名为 FireFinder 的提示,你可以用它来测试你的 css/jquery 选择器。
来自网站:Firefinder 是 Firebug(在 Firefox 中)的扩展,提供了快速查找与所选 CSS 选择器或 XPath 表达式匹配的 html 元素的功能。它允许您在查看内容的同时立即在页面中测试您的 CSS 选择器,匹配的元素将被突出显示。
【讨论】:
【参考方案6】:var $li = jQuery('li', this).not('.dropdown-menu > li');
我正在使用 Roots 主题,他们将下拉菜单从“子菜单”更改为“.dropdown-menu”
【讨论】:
【参考方案7】:将 :not('.baz') 添加到您的***选择器。
【讨论】:
以上是关于什么 JQuery 选择器会排除与给定选择器匹配的父项的项目?的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 选择器,用于查找与选择器匹配的给定元素之后的第一个元素