javascript - 如何防止 parentNode 疯狂？

我有一个项目列表，其中包含不同的事件处理程序。

...
<li>
   <div class="item" data-id="1234">
     <h3>Item</h3>
     <div class="description">...</div>
     <ul class="lists">
        <li data-list-id="1">Add to list A<li>
        <li data-list-id="2">Add to list B<li>
        <li data-list-id="3">Add to list C<li>
     </ul>
     <button class="delete">delete</button>
   </div>
</li>
...

li 下的每个 .list 都注册了一个单击事件，如下所示:

function addToList(event){
   var id = event.target.getAttribute('data-id');
   var listId = event.target.parentNode.parentNode.getAttribute('data-id');
   // XHR stuff
}

这段代码没有问题，但 parentNode.parentNode 看起来真的很脆弱。
对于按钮将只有一个 parentNode 而对于更深的嵌套元素 parentNode^n

我想这是一个常见问题，有更强大的解决方案吗？
使用 jQuery 我会使用 $(target).parentNode('.item')
在没有 jQuery 的情况下，最好的方法是什么？

最佳答案

作为我项目的一部分，我总是编写自己的工具箱。当然，我可以使用 jQuery，但我会坚持使用我的精密工具包而不是大锤，谢谢!

考虑到这一点，看看这个:

function findParent(source,filter,root) {
    root = root || document.documentElement;
    while(source != root) {
        if( filter(source)) return source;
        source = source.parentNode;
    }
}

在您的情况下，您现在可以调用:

var listId = findParent(
        event.target,
        function(e) {return e.attributes && e.attributes['data-id'];}
    ).getAttribute("data-id");
// note that you should probably break that down, checking if an element
// is found before getting its attribute value... or let the error
// kill your script. Either works.

现在，它看起来确实比简单的 .parentNode.parentNode 更困惑，但它更健壮，因为它不依赖于某个数字的深度，我相信这就是您的目标。

关于javascript - 如何防止 parentNode 疯狂？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23779076/