通过类或名称获取嵌套子元素的父元素答案

【问题标题】：Get parent element of nested child by class or name通过类或名称获取嵌套子元素的父元素
【发布时间】：2020-02-16 07:05:36
【问题描述】：

我有 unknown 层次结构的 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 我不知道哪个可以帮助我？

或者循环遍历所有父母直到我需要 class 或 name 是唯一可能的选择？

【问题讨论】：

这是一种方式。另一种方法是通过属性将父级所需的信息提供给子级。
喜欢这个？ stackoverflow.com/a/12981248/863110（或 jQuery .parents）

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

如果需要，您可以使用 node.closest() 和 polyfill。

function get_parent (node, selector) {
  console.log(node.closest(selector));
}

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

<div class="other-parent" name="other-parent">
  <div>
    <div onclick="get_parent(this, '.other-parent')">
      Nested Child 2
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

纯 JS 唯一的解决方案你可以试试！

function getParent(ele, parentClass="parent"){
   var e = ele;
   while(!e.classList.contains(parentClass)){
      e=e.parentElement;
   }
   console.log(e);
   return e;
}

<div class="parent">
   <div>
      <div>
         <div>
            <div onclick="getParent(this)">CHILD 1</div>
         </div>
      </div>
   </div>
</div>


<div class="second_parent">
    <div>
        <div onclick="getParent(this,'second_parent')">CHILD 2</div>
    </div>
</div>

【讨论】：

【解决方案4】：

你应该循环“parent()”函数 jquery。

function get_parent(a){
  $(a).parent().parent();
  console.log("test",$(a).parent().parent());
}

<div class="parent" name="parent">
  <div>
    <div onclick="get_parent(this)">
      Nested Child 2
    </div>
  </div>
</div>
<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

【讨论】：

【解决方案5】：

类似于拉吉。防止在最后得到 null。

找到具有“highlight”类的父级。停止在 body 标签处搜索。换句话说，你不能搜索比 body 标签更远的地方。

使用示例：

if (getParent(el,'highlight')[1]){ 
    let e = getParent(el,'highlight')[0]
    console.log('element found is',e)
 }

function getParent(el,cl){
        let e = el
        let tag = ''
        while( tag !== 'HTML' && ! hasClass(e,cl) ){
            e=e.parentElement;
            tag = e.tagName
        }
        let found = (tag === 'HTML') ? [null,false] : [e,true]
        console.log('result is ',found);
        return found
}

这是我经常使用的一个功能。

function hasClass(el,cl){
                if (el == null){return false}
                return (el.classList.contains(cl)) ? true : false
    }

【讨论】：