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

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，最好的办法是什么？

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更麻烦，但它更强大，因为它不依赖于某个数字的深度，我相信是你的目标是什么。

如何防止parentNode疯狂？

1 个答案: