查找具有特定类的最近祖先元素

javascript dom html

2022-08-29 23:49:58

在纯JavaScript中，我如何找到最接近具有特定类的树的元素的祖先？例如，在这样的树中：

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

然后我想如果我尝试这个在并搜索.div.near.ancestorpancestor

答案 1

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

请注意，这可以匹配选择器，而不仅仅是类

对于不支持但有选择器的旧版浏览器，可以构建类似于@rvighne类匹配的选择器匹配：closest()matches()

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

答案 2

这就完成了以下操作：

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

while 循环将一直等到具有所需的类，并且每次迭代都设置为的父级，因此最终，您将具有该类或的祖先。elelelnull

这是一把小提琴，如果有人想改进它。它不适用于旧浏览器（即IE）;请参阅此类列表的兼容性表。在这里使用，因为需要做更多的工作来确保节点是一个元素。parentElementparentNode