查找不包含在另一个元素中的元素的有效方法

Efficient way to find elements not contained in another element

本文关键字：元素 有效 方法 另一个 包含 查找      更新时间：2023-09-26

找到与选择器匹配的元素的最有效方法是什么，而这些元素不在给定DOM节点内（即，我被传递了该节点，不一定能推导出与之匹配的选择器）。到目前为止，我有

var inputs = $("input").filter(function() {
    return !$(excludedNode).has(this).length;
});

但我忍不住想，还有比这更好的解决方案，因为尽管没有太多代码，但我怀疑它是否非常有效。

这个怎么样：

var inputs = $("input").filter(function() {
    return $(this).closest(excludedNode).length == 0
    //or:
    return !$(this).closest(excludedNode).length
});

它会找到您想要的元素，然后检查它是否有excludedNode 的父级

我设置了一个jsperf来测试其他人提出的有效建议和另一个想法。

值得注意的是，使用$.has的方法比使用$.closest快大约3倍（因为它委托给浏览器的document.element.contains，而$.closest进行一些选择器操作并遍历DOM树）。它也比$("div").not("#" + id + " *")快大约相同的差异。

所以最快的方法是

$("input").filter(function() {
    return !$(excludedNode).has(this).length;
});

使用$.closest，直观上感觉是最快的方式，实际上是最慢的

如果"排除的节点"有一个"id"或其他可以用作选择器的东西，则有：

var inputs = $('input').not('#excluded *');

或

var inputs = $('input').not('#' + node.id + ' *');

$('input').not('#someID input').doSOmething()

var inputs = $('input').not('*', excludedNode);

或

var inputs = $('input').not('*', $(excludedNode));

看起来更好。

相关文章：