如何在纯JavaScript中获取nth-parent元素而不是jquery

Question

例如，

<div class="panel">
   <div class="inner-panel">
      <button onclick="hideParentElement()">
        Hide
      </button>
   </div>
 </div>

如果我想向最外层的部门添加一个类，我需要获取该元素并为其添加一个类。如何使用纯javascript实现这一目标？

我尝试了以下内容：

this.parentElement.parentElement.classList.add("classname");

这样可行，但如果有2个以上的parentElements则不正确。 请建议更好的方式

Answer 1

你必须像这样循环父母。

var el = this.parentElement;
while(el.className != 'panel'){
    el = el.parentElement;
}
//el is now your parent
el.className += "classname";

使用纯Javascript，这是实现它的方法。

Answer 2

如果您的班级列表正在动态更改：

let parent = this.parentElement;

while (!parent.classList.contains('panel'))
    parent = parent.parentElement;

parent.classList.add('classname');