.parentElement 的替代方案？

Question

我有一个函数需要经过很多 parentElements 才能获得一个 id。而不是写 if( element.parentElement.parentElement.parentElement.id == "target" ){ doThis() } 在 javascript 中有没有办法只说 "If there is a parent element with "this id"doThis()"？除了遍历所有这些 parentElements 之外，有没有一种方法可以直接说明是否有任何元素是具有此 ID 的当前元素的父元素，然后 doThis()？

编辑

很多人说我应该 getElementById 也许这就是解决方案，但让我向您展示我的代码示例，以便您更好地了解我在做什么：

我有很多具有相同功能的div。让我们称之为 clicked()。

假设我有 20 个如下所示的 div：<div onclick = "clicked( this )">Content</div>

假设这些 div 包含在其他几个 div 中：

<div id = "container">
    <div id = "top">
       <div id = "left">
           <div onclick = "clicked( this )">Content</div>
           <div onclick = "clicked( this )">Content2</div>
           ...
       </div>
    </div>
</div>

我点击的函数看起来像：

function clicked( element ){
    if( element.parentElement.parentElement.parentElement.id == 'container' ){ 
        doThis();
    }
}

Answer 1

您可以编写一个函数来搜索父层次结构：

function parentWithId(elem, id) {
   while (elem = elem.parentNode && elem !== document.body) {
       if (elem.id === id) {
           return elem;
       }
   }
   return null;
}

var p = parentWithId(element, "target");
if (p) {
    doThis();
}

或者，您甚至可以将整个内容合并到函数中

function parentWithId(elem, id, fn) {
   while (elem = elem.parentNode && elem !== document.body) {
       if (elem.id === id) {
           if (fn) {
               fn(elem);
           }
           return elem;
       }
   }
   return null;
}


parentWithId(element, "target", doThis);

.parentElement 的替代方案？

Alternative to .parentElement?

javascript

parent-child