Как определить, соответствует ли элемент селектору?

Question

Предположим, у меня есть элемент DOM - как я могу определить, соответствует ли он селектору jQuery, например p или .myclass? Легко использовать селектор для соответствия дочерним элементам, но мне нужен истинный/ложный ответ на соответствие этого конкретного элемента?

Элемент может не иметь идентификатора (и я не могу назначить его случайным по причинам, выходящим за рамки этого), поэтому я не могу применить свой селектор к родительскому элементу элемента и искать детей с тем же идентификатором, что и мой ,

Будет ли это работать должным образом? Я не могу понять сравнение объектов Javascript.

$(selector, myElement.parentNode).each({ 
    if (this == myElement) // Found it 
}); 

Похоже было бы простой способ, чтобы увидеть, соответствует ли DOM элемент селектор JQuery ...

Answer 1

Вы можете использовать is() метод:

if($(this).is("p")){ 
// ... 
} 

Answer 2

Я считаю, что is() метод - это то, что вы ищете.

В противном случае вы можете просто попробовать выбрать элемент напрямую, если это то, что вы имеете в виду.

Так что, если это «а» с классом «MyClass», просто сделать $ («a.myclass»)

Answer 3

я не могу применить мой селектор родительского элемента и искать дети с тем же удостоверением личности, что и мой.

Вы все равно не можете этого сделать - атрибут id должен быть уникальным.

Answer 4

Может быть, вы просто хотите:

$(".complicated #selector p.with > div.manyParts").length 

Если нет совпадения, длина возвращает 0, что falsy, так что вы можете использовать его в if заявлении, как:

if($(".doesThis #exist").length) { 
    // Do things 
} 

Вероятно было бы целесообразно хранить его в отдельной переменной и ТОГДА проверять длину; Таким образом, если вам нужно что-либо сделать с согласованными элементами, вам не нужно снова выполнять тот же селектор.

Answer 5

Без JQuery, используя Element.matches():

// lets define 2 variables pointing to ordinary <div> elements 
 
var elm1 = document.querySelector('div'); 
 
var elm2 = elm1.nextElementSibling; 
 

 
console.log(
 
    elm1.matches('.foo'),   // true 
 
    elm1.matches('.bar'),   // false 
 
    elm2.matches('[title=bar]'), // true 
 
)

<div class='foo'></div> 
 
<div title='bar'></div>

---

See supported browsers list