Использование: нет (: нет()) для эмуляции (гипотетический): есть() селектор в JQuery

Question

Я хотел бы написать JQuery заявления типа:

$(".someparentcontainer input[type=checkbox]:is(.foo, .bar, .xyz)") 

В качестве краткого обозначения:

$(".someparentcontainer input[type=checkbox].foo, .someparentcontainer input[type=checkbox].bar, .someparentcontainer input[type=checkbox].xyz)") 

Поскольку JQuery не поддерживает (к моему знанию): есть() селектор я придумал следующий обходной путь:

$(".someparentcontainer input[type=checkbox]:not(:not(.foo, .bar, .xyz))") 

Я понимаю, что у него есть его недостатки с точки зрения производительности, если .someparentcontainer имеет тонну дочерних элементов, но он работает очень хорошо для небольших домиков.

Есть ли какие-нибудь подводные камни, которые мне могут не хватать здесь? Любые сценарии, в которых эта техника может потерпеть неудачу?

Answer 1

Есть ли какие-нибудь подводные камни, которые могут у меня пропали? Любые сценарии, в которых эта техника может потерпеть неудачу?

Как вы отметили свой вопрос css-selectors, the standard does not allow :not() to be nested within another :not(). Каждая известная реализация :not() в стандартном правильном обращается с тем, что у вас недействительно. Если jQuery разрешает это (я не могу сказать, что я удивлен, если это так), то это нестандартно, и вам нужно быть очень осторожным, чтобы не полагаться на него вне jQuery (например, он не будет работать в querySelectorAll(), или в CSS).

рекомендуется способ сделать это состоит в использовании .filter() вместо:

// If you know that the element with any of these ids is always a checkbox, 
// substitute ".someparentcontainer *" for the second selector string 
$(".someparentcontainer input[type=checkbox]").filter(".foo, .bar, .xyz") 

Но это означает, что вы должны написать две отдельные строки селектора. Опять же, нет никакого способа сделать это с помощью стандартного селектора, совместимого со стандартами, до тех пор, пока не будет реализован :matches() селекторов 4 (см. Does jQuery have something like the :any or :matches pseudo-class?).

Answer 2

Вы можете использовать функцию find Jquery в:

$("#someparentcontainer").find("#foo, #bar, #xyz").css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="someparentcontainer"> 
 
    <div id="foo">foo</div> 
 
    <div id="bar">bar</div> 
 
    <div id="abc">abc</div> 
 
</div> 
 
<div id="xyz">xyz</div>

Что делает гораздо больше смысла.