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

Question

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

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

然后我想要div.near.ancestor，如果我在p上尝试这个并搜索祖先。

Answer 1

使用element.closest（）

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

请参见以下示例：

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

这就是你如何使用element.closest：

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

Answer 2

这就是诀窍：

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

while循环等待el拥有所需的类，并且它在每次迭代中将el设置为el的父级，因此最终，您将拥有该类的祖先或null。

这是一把小提琴，如果有人想改进的话。它在旧浏览器（即IE）上不起作用；有关类列表，请参见此兼容性表<这里使用code>parentElement，因为parentNode需要更多的工作来确保节点是一个元素。

Answer 3

更新：现在大多数主要浏览器都支持

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