如何判断元素是否与选择器匹配？

Question

Let's say I've got a DOM element - how can I tell whether it matches a jQuery selector, such as p or .myclass ? It's easy to use the selector to match children of the element, but I want a true/false answer to whether this particular element match?

The element may not have an ID (and I can't assign it a random one for reasons beyond this), so I can't apply my selector to the element's parent and look for children with the same ID as mine.

Will this work as intended? I can't figure out Javascript object comparisons.

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

Seems like there would be an easy way to see whether a DOM element matches a jQuery selector...

Answer 1

You can use the is() method:

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

Answer 2

Without jQuery, using Element.matches() :

 var elements = document.querySelectorAll('div'); console.log( elements[0].matches('.foo'), // true elements[0].matches('.bar'), // false elements[1].matches('[title=bar]'), // true )

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

---

See supported browsers list

Answer 3

I believe the is() method is what you are looking for.

Otherwise, you might just try selecting the item directly, if that is what you mean.

So if it's an "a" with a class of "myclass", just do $("a.myclass")

Answer 4

I can't apply my selector to the element's parent and look for children with the same ID as mine.

You can't do that anyway - the id attribute must be unique.

Answer 5

Maybe you just want:

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

If there are no matches, length returns 0, which is falsy, so you can use it in an if statement, like:

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

Probably would be worth storing it in a separate variable and THEN checking the length; that way, if you need to do anything with the matched elements, you don't have to execute the same selector again.

Answer 6

Try Element.matches()

Element.matches()

document.addEventListener("click", event => {
  if (event.target.matches(".elementsClass")) {
    // It matches
  } else {
    // Does not match
  }
});