Comment puis-je savoir si un élément correspond à un sélecteur?

Question

Disons que j'ai un élément DOM - comment puis-je savoir s'il correspond à un sélecteur jQuery, tel que p ou .myclass? Il est facile d'utiliser le sélecteur pour faire correspondre les enfants de l'élément, mais je veux une réponse vrai/faux pour savoir si cet élément particulier correspond? L'élément peut ne pas avoir d'ID (et je ne peux pas l'assigner au hasard pour des raisons autres que celle-ci), donc je ne peux pas appliquer mon sélecteur au parent de l'élément et chercher des enfants avec le même identifiant que le mien .

Est-ce que cela fonctionnera comme prévu? Je ne peux pas comprendre les comparaisons d'objets Javascript.

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

On dirait qu'il y aurait un moyen facile de voir si un élément DOM correspond à un sélecteur jQuery ...

Answer 1

Vous pouvez utiliser la méthode is():

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

Answer 2

Je crois que le is() méthode est ce que vous cherchez.

Sinon, vous pourriez essayer de sélectionner directement l'élément, si c'est ce que vous voulez dire.

Donc, si c'est un « a » avec une classe de « MyClass », il suffit de faire $ (« a.myclass »)

Answer 3

Je ne peux pas appliquer mon sélecteur au parent de l'élément et chercher enfants avec le même ID que le mien.

Vous ne pouvez pas le faire de toute façon - l'attribut id doit être unique.

Answer 4

Peut-être vous voulez juste:

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

Si aucune correspondance, longueur retourne 0, ce qui est falsy, de sorte que vous pouvez l'utiliser dans une déclaration if, comme:

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

Probablement serait intéressant de le stocker dans une variable distincte et ensuite en vérifiant la longueur; Ainsi, si vous avez besoin de faire quoi que ce soit avec les éléments correspondants, vous n'avez plus besoin d'exécuter le même sélecteur.

Answer 5

Sans jQuery, en utilisant 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