☰

特定のクラスを持つ最も近い祖先要素を検索する 質問する

tag-icon • tag-icon javascript html dom
特定のクラスを持つ最も近い祖先要素を検索する 質問する

純粋な JavaScript で、特定のクラスを持つツリーの最も近い要素の祖先を見つけるにはどうすればよいでしょうか。たとえば、次のようなツリーの場合:

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

次に、div.near.ancestorでこれを試してp、 を検索しますancestor。

ベストアンサー1

更新: サポートされるようになりましたほとんどの主要ブラウザで

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;
}

おすすめ記事