选择器忽略特定元素中包含的元素

Question

我目前正在开发一个软件插件，用于扫描页面中的链接以进行编辑。但是有一个问题：我不想编辑特定元素中包含的链接（在这种情况下：编辑框）。此编辑框中包含的元素也可以嵌套，因此父级可能不合适。

有没有办法通过选择器排除元素中包含的元素？

Answer 1

您可以运行此纯JavaScript，它将返回匹配模式中不在您指定的容器中的所有元素。

var anchors = document.querySelectorAll('*:not(.editBox)>a.link');

假设你不想要的容器有一个“editBox”类，你可以将匹配的“link”类改为你想要的任何查询选择器，对所有锚元素都可以是一个简单的'a'。我创建了一个JSFiddle作为演示。

Answer 2

这不一定都在一个选择器上。您可以非常简单地使用常规选择器来捕获所有元素，然后执行not()函数将元素修剪为仅需要的元素。

var elems = $( "a" ); // all anchor links
elems = elems.not( ".ignore_me" ); // remove all links with the "ignore_me" class.

您甚至可以使用函数链将这两者合并为一个命令：

var elems = $( "a" ).not( ".ignore_me" );

我认为第三种选择可读性稍差：

var elems = $( "a:not( .ignore_me )" );

参考文献：

• :not()
• not()