javascript - 通过类或名称获取嵌套子元素的父元素

Question

我有 html 元素，如下所示，层次结构未知:

<div class="parent" name="parent">
  <div>
    <div>
      <div>
        <div onclick="get_parent(this)">
          Nested Child 1
        </div>
      </div>
    </div>
  </div>
</div>

<div class="parent" name="parent">
  <div>
    <div onclick="get_parent(this)">
      Nested Child 2
    </div>
  </div>
</div>

有没有简单的方法可以按类或名称获取嵌套子级的父级？

也许有一些替代 child.parentElement或 child.parentNode我不知道哪个可以帮助我？

或者遍历所有 parent ，直到我需要 class或 name是唯一可能的选择吗？

Answer 1

我认为 closest是最好的解决方案。

function get_parent(elem) {
/*** For Class ***/
 // var x = elem.closest(".parent").className;
 /*** For Name ***/
   var x = elem.closest(".parent").attributes["name"].value;
  document.getElementById("demo").innerHTML = x;
}

<div class="parent" name="parent1">
<div>
  <div>
    <div>
      <div onclick="get_parent(this)">
        Nested Child 1
      </div>
    </div>
  </div>
</div>
</div>
<div class="parent" name="parent2">
  <div>
    <div onclick="get_parent(this)">
      Nested Child 2
    </div>
  </div>
</div>

<p id="demo"></p>