如何判断一个元素是否匹配某个选择器？

Question

假设我有一个DOM元素 - 我如何确定它是否与jQuery选择器匹配，例如p或.myclass？使用选择器匹配元素的子元素很容易，但我想要一个true/false的答案来判断这个特定的元素是否匹配。

该元素可能没有ID（而且出于某些原因我不能为其分配一个随机ID），因此我不能将我的选择器应用于元素的父级并查找具有与我的ID相同的子级。

这段代码能否达到预期效果？我无法理解Javascript对象比较。

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

看起来有一种简单的方法可以检查一个DOM元素是否与jQuery选择器匹配...

- sam

---

请仅返回翻译后的文本：重复的 - https://dev59.com/WHA75IYBdhLWcg3wboYz - vsync

这是否解答了你的问题？测试选择器是否匹配给定元素 - Liam

Answer 1

你可以使用is()方法：

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

- Zach

---

但是这个代码是否能像这样工作呢？$(this).is("body .content p") - 我需要类似这样的东西。 - Luke

看起来它应该可以很好地完成那个任务。 - Machado

Answer 2

不使用jQuery，使用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>

---

查看支持的浏览器列表

- vsync

Answer 3

我相信你需要的是 is() 方法。

否则，如果你要选择特定的元素，只需直接选择即可。

所以，如果你要选择 class 为 "myclass" 的 "a" 元素，只需使用 $("a.myclass")。

- Jeff Davis

Answer 4

也许你只是想要：

。

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

如果没有匹配项，length返回0，它是假值，所以你可以在if语句中使用它，例如:

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

可能值得将其存储在单独的变量中，然后再检查其长度；这样，如果需要对匹配的元素执行任何操作，就不必再次执行相同的选择器。

- tandrewnichols

Answer 5

我不能将我的选择器应用于元素的父级，并查找具有与我的相同ID的子元素。

无论如何，您都不能这样做 - id属性必须是唯一的。

- Peter Boughton

Answer 6

尝试使用Element.matches()。

Element.matches()

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

- CloudBranch