按類或名稱獲取嵌套子項的父元素

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我不知道哪個可以幫助我？

或者循環遍歷所有父母直到我得到所需的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>

Answer 2

您可以嘗試的純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>

Answer 3

您可以使用node.closest()與填充工具，如果你需要。

 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>

Answer 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>

Answer 5

類似於拉傑。 用這個防止最后變空。

找到具有“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
    }