javascript - 如何防止 parentNode 疯狂？

Question

我有一个项目列表，上面有不同的事件处理程序。

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

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

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 的最佳方法是什么？

Answer 1

作为我项目的一部分，我总是编写自己的工具箱。当然，我可以使用 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 更困惑，但它更健壮，因为它不依赖于一定深度，我相信这是你的目标是什么。