如何判斷元素是否與選擇器匹配？

Question

假設我有一個 DOM 元素 - 我如何判斷它是否匹配 jQuery 選擇器，例如p或.myclass ？ 使用選擇器來匹配元素的子元素很容易，但我想要這個特定元素是否匹配的真/假答案？

該元素可能沒有 ID（出於其他原因，我無法為其分配一個隨機 ID），因此我無法將選擇器應用於元素的父級並查找與我的 ID 相同的子級。

這會按預期工作嗎？ 我無法弄清楚 Javascript 對象比較。

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

似乎有一種簡單的方法可以查看 DOM 元素是否與 jQuery 選擇器匹配......

Answer 1

您可以使用is()方法：

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

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>

---

查看支持的瀏覽器列表

Answer 3

我相信is()方法是您正在尋找的。

否則，您可能只是嘗試直接選擇該項目，如果這是您的意思。

因此，如果它是一個帶有“myclass”類的“a”，只需執行 $("a.myclass")

Answer 4

我無法將我的選擇器應用於元素的父元素並尋找與我的 ID 相同的子元素。

無論如何您都不能這樣做 - id屬性必須是唯一的。

Answer 5

也許你只是想要：

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

如果沒有匹配，長度返回 0，這是假的，所以你可以在if語句中使用它，比如：

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

可能值得將它存儲在一個單獨的變量中，然后檢查長度； 這樣，如果您需要對匹配的元素做任何事情，您不必再次執行相同的選擇器。

Answer 6

試試Element.matches()

元素匹配（）

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