Question

给定像这样$(selector,containerElement)的jQuery集合，是否可以测试给定的Element是否会成为该集合的一部分而不构建集合。

即，不执行此操作：$(selector,containerElement).is(someElement)，它将构造一个包含所有匹配元素的jQuery对象，然后检查其中一个元素是否为someElement。

有更有效的方法吗？

PS：保持中间jQuery支持其他选择器语法，如:has()，:lt()，:first和相对选择器，如> tagName，+ tagName。

Answer 1

我最终为此实施了自己的自定义解决方案以下功能可以解决问题。

function jQueryMatch(selector, container, element){
    let attrName = '_dummy_876278983232' ;
    let attrValue = (''+Math.random()).slice(2) ;
    $(container).attr(attrName,attrValue) ;
    selector = selector.replace(/(,|^)(\s*[>~+])/g,`$1 [${attrName}=${attrValue}]$2`) ;
    return $(element).is(selector) ;
}

jQueryMatch(selector, container, element)相当于$(selector, container).is(element)。

根据选择器的复杂程度，我将jQueryMatch的速度提高了3到10倍。在更大的DOM树上，差异会更大。

该功能非常简单，因此很容易弄清楚它的功能。

Answer 2

$。contains（containerElement，someElement）;

Answer 3

如果性能有问题，可以使用vanilla JS，例如：

[...yourContainer.querySelectorAll('yourSelector')].includes(elementToTest)

<强>示例：

＆＃13;

let container = document.querySelector('[data-container');
let insideElement = container.querySelector('[data-inside-element]');
let outsideElement = container.querySelector('[data-outside-element]');

console.log([...container.querySelectorAll('[data-inside-element]')].includes(insideElement));
console.log([...container.querySelectorAll('[data-inside-element]')].includes(outsideElement));

＆＃13;

<div data-container>
  <p data-inside-element>element1</p>
  <p data-inside-element>element2</p>
  <p data-inside-element>element3</p>
</div>

<p data-outside-element>outside element</p>

＆＃13;

Answer 4

扩展Brian Reynolds的答案：

$.contains(containerElement, someElement) && someElement.is(selector)

但是，如果selector以>，+或~等需要相对于特定位置的运算符开头，则此功能无法运行至containerElement，因为我们已将这些变量分开。

有效地测试Element是否在jQuery集合中

4 个答案: