Jak mogę sprawdzić, czy element pasuje do selektora?

Question

Załóżmy, że mam element DOM - jak sprawdzić, czy pasuje do selektora jQuery, takiego jak p czy .myclass? Łatwo jest użyć selektora, aby dopasować dzieci elementu, ale chcę odpowiedzi prawdziwej/fałszywej, czy ten konkretny element pasuje?

Element może nie mieć identyfikatora (i nie mogę przypisać go losowo z przyczyn leżących poza tym obszarem), więc nie mogę zastosować selektora do elementu nadrzędnego elementu i wyszukać dzieci o tym samym identyfikatorze co moje .

Czy to działa zgodnie z przeznaczeniem? Nie mogę wymyślić porównań obiektów JavaScript.

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

Wydaje się, że byłoby to łatwy sposób, aby zobaczyć, czy pasuje do elementu DOM selektor jQuery ...

Answer 1

Można użyć metody is():

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

Answer 2

Wierzę is() metoda jest tym, czego szukasz.

W przeciwnym razie możesz po prostu spróbować wybrać element bezpośrednio, jeśli o to ci chodzi.

Więc jeśli jest to „a” z klasą „MojaKlasa”, po prostu zrobić $ („a.myclass”)

Answer 3

nie mogę zastosować do mojego wyboru rodzica elementu i szukać dzieci o tym samym identyfikatorze co moje.

Tak czy inaczej nie możesz tego zrobić - atrybut id musi być unikalny.

Answer 4

Może chcesz po prostu:

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

Jeśli nie ma dopasowania, długość zwraca 0, co jest falsy, więc można go używać w instrukcji if, jak:

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

Prawdopodobnie byłoby warte przechowywania go w oddzielnej zmiennej, a następnie sprawdzania długości; w ten sposób, jeśli chcesz zrobić cokolwiek z dopasowanymi elementami, nie musisz ponownie wykonywać tego samego selektora.

Answer 5

Bez jQuery, używając 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