1. ホーム
  2. ジャバスクリプト

[解決済み】特定のクラスを持つ最も近い祖先要素を検索する

2022-03-29 14:06:02

質問

特定のクラスを持つ、最も近いツリー上の要素の祖先を見つけるにはどうしたらよいですか。 純粋なJavaScriptで ? 例えば、こんな感じのツリーで。

<div class="far ancestor">
    <div class="near ancestor">
        <p>Where am I?</p>
    </div>
</div>

それから、私は div.near.ancestor で試すと p を検索して ancestor .

解決方法は?

アップデート:対応しました ほとんどの主要なブラウザで

document.querySelector("p").closest(".near.ancestor")

これはクラスだけでなく、セレクタにもマッチすることに注意してください。

https://developer.mozilla.org/en-US/docs/Web/API/Element.closest


をサポートしていないレガシーブラウザの場合 closest() がありますが matches() を使えば、@rvighne のクラスマッチングと同じようなセレクタマッチングを構築することができる。

function findAncestor (el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
}