javascript - .parentElement 的替代方案？

Question

我有一个函数需要经过很多 parentElement获取 id。而不是写 if( element.parentElement.parentElement.parentElement.id == "target" ){ doThis() }在javascript中有没有一种方法只是说“如果有一个带有“这个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);