检查某个parentNodes中是否有某个类的优雅方法

Question

我有一个菜单，可以在悬停时展开和收缩。问题是菜单有很多元素，为了触发我的展开函数，我需要编写如下所示的内容。我的实际代码包含了更多的代码，我想知道是否会有更好的方法来做到这一点。

var e = event.target

if(
e.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.parentNode.className.split(" ")[0] === "main-section"){
//do somehtings}

Answer 1

在现代环境中，您可以使用DOM的closest方法：

if (e.closest(".main-section")) {
    // One was found...
}

它查看当前元素，看看它是否匹配选择器，然后它的父元素，然后它的父元素，等等。它返回它找到的元素，如果找不到，则返回null。

对于稍微老一点的环境，Element#closest可以多填充。或者，如果您不喜欢填充，您可以为自己提供一个实用程序函数，如果它存在，可以使用closest，如果没有，可以使用matches：

function closest(el, selector) {
    if (el.closest) {
        return el.closest(selector);
    }
    var matches = el.matches || el.matchesSelector;
    while (el) {
        if (matches.call(el, selector)) {
            return el;
        }
        el = el.parentNode;
    }
    return null;
}

你会用这样的...which：

if (closest(e, ".main-section")) {
    // One was found...
}

Answer 2

方法closest()在某些浏览器中不受支持，因此我从这个回答中为您获取了这个函数。

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

Answer 3

将classList与类似的递归函数一起使用。

​

const start = document.getElementById("start");

function recursiveCheck(ele, className, limit = 3, current = 0){
   return ele.classList.contains(className) ? true : current >= limit ? false : recursiveCheck(ele.parentNode, className, limit, current + 1);
}

console.log(
  recursiveCheck(start, "test")
);

<div class="test">
  <div>
    <div id="start"><div>
  </div>
</div>

​