【问题标题】：How can I tell whether an element matches a selector?如何判断元素是否与选择器匹配？
【发布时间】：2009-02-27 19:05:31
【问题描述】：

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

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

这会按预期工作吗？我无法弄清楚 Javascript 对象比较。

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

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

【问题讨论】：

重复 - stackoverflow.com/q/3304638/104380

标签： javascript jquery dom

【解决方案1】：

您可以使用is() 方法：

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

【讨论】：

但是这样工作吗？ $(this).is("body .content p") - 我需要这样的东西

【解决方案2】：

我相信is() 方法正是您想要的。

否则，您可以尝试直接选择项目，如果您的意思是这样的话。

所以如果它是一个带有“myclass”类的“a”，只需执行 $("a.myclass")

【讨论】：

【解决方案3】：

我无法将我的选择器应用于元素的父元素并寻找子元素和我的ID一样。

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

【讨论】：

【解决方案4】：

没有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

【讨论】：

【解决方案5】：

也许你只是想要：

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

如果没有匹配，length返回0，这是假的，所以你可以在if语句中使用它，比如：

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

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

【讨论】：

【解决方案6】：

试试Element.matches()

Element.matches()

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

【讨论】：