ElementがjQueryコレクションに含まれるかどうかを効率的にテストする

このような $(selector、containerElement)のようなjQueryコレクションを考えると、与えられた要素がコレクションをまったく構築せずにそのコレクションの一部になるかどうかをテストすることは可能です。

つまり、これを行わずに、 $(selector、containerElement).is(someElement)となり、一致したすべての要素を内部に持つjQueryオブジェクトを作成し、それらの要素の1つがであるかどうかを確認しますsomeElement

もっと効率的な方法はありますか?

PS: Keep in mid that jQuery supports additional selector syntax like :has(), :lt(), :first and relative selectors like > tagName, + tagName.

2
@ gforce301では、 setInterval コールバック内やmoveイベントへの応答のように、頻繁に実行する必要がある場合は、徹底的な方法では不十分です。
追加された 著者 GetFree,
@ gforce301では、 setInterval コールバック内やmoveイベントへの応答のように、頻繁に実行する必要がある場合は、徹底的な方法では不十分です。
追加された 著者 GetFree,
@LGSon私は、jQueryがネイティブAPIよりも多くのセレクターをサポートすることは一般的な知識であると思った。明確にするために質問を編集しました。
追加された 著者 GetFree,
@LGSon私は、jQueryがネイティブAPIよりも多くのセレクターをサポートすることは一般的な知識であると思った。明確にするために質問を編集しました。
追加された 著者 GetFree,
3〜4人のユーザーは、すべての奇妙な点を考慮して簡単なサンプルを作成した場合には避けられる可能性がある何かに時間を費やしました。
追加された 著者 LGSon,
jQuery自体は非常に効率的です。なぜあなたはこれをする必要がありますか?
追加された 著者 gforce301,
@GetFreeこれは一般的な知識ですが、これらのセレクタはあなたの場合には役に立つかもしれないしそうでないかもしれません。今、私たちは彼らがいることを知っています。
追加された 著者 Jeto,
@GetFreeこれは一般的な知識ですが、これらのセレクタはあなたの場合には役に立つかもしれないしそうでないかもしれません。今、私たちは彼らがいることを知っています。
追加された 著者 Jeto,

6 答え

このために独自のカスタムソリューションを実装しました。
次の関数はうまくいきます。

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) is equivalent to $(selector, container).is(element).

セレクターの複雑さにもよりますが、 jQueryMatch は3倍から10倍高速です。より大きいDOMツリーでは、違いはさらに大きくなります。

この機能は非常にシンプルなので、何をするのか簡単にわかります。

1
追加された

ブライアンレイノルズの答えを拡大する:

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

However, this won't work if selector starts with operators like >, +, or ~ that require it to be in a specific position relative to containerElement, since we've separated those variables.

0
追加された
良い点、私は答えに警告を追加しました。
追加された 著者 Barmar,
$( '> div'、container) $( '+ div'、container) $( '〜div')のような相対的なセレクタでは動作しません、コンテナ)
追加された 著者 GetFree,

パフォーマンスが問題になる場合は、これにはvanilla JSを使用できます。

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

Sample:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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));
<div data-container>
  

element1

element2

element3

</div>

outside element

</div> </div>

0
追加された
jQueryは $( '> div'、container) $( '+ div'、container)や<などの追加のセレクター構文をサポートするため、ネイティブDOM APIは機能しませんとりわけ> $( '〜div'、container)です。
追加された 著者 GetFree,

パフォーマンスが問題になる場合は、これにはvanilla JSを使用できます。

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

Sample:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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));
<div data-container>
  

element1

element2

element3

</div>

outside element

</div> </div>

0
追加された
jQueryは $( '> div'、container) $( '+ div'、container)や<などの追加のセレクター構文をサポートするため、ネイティブDOM APIは機能しませんとりわけ> $( '〜div'、container)です。
追加された 著者 GetFree,

$ .contains(containerElement、someElement);

0
追加された
.contains()は要素が子孫であるかどうかだけをチェックします。 CSSセレクタはもっと複雑かもしれません。
追加された 著者 GetFree,
いいことに、.filter()を使って自分の標準と同等のものをテストすることもできます。
追加された 著者 Brian Reynolds,

$ .contains(containerElement、someElement);

0
追加された
.contains()は要素が子孫であるかどうかだけをチェックします。 CSSセレクタはもっと複雑かもしれません。
追加された 著者 GetFree,
いいことに、.filter()を使って自分の標準と同等のものをテストすることもできます。
追加された 著者 Brian Reynolds,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript