2

没有图书馆解决方案，请，但如果你知道这样做的，我很高兴看看他们是如何做到的。不太关心后备和跨浏览器支持。

我有一个层次结构（会改变）：

<body>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div>
            <a>Click Me!</a>
        </div>
    </div>
</body>

我有一个事件侦听器<a>Click Me!</a>并返回一个事件对象。这么多的作品。耶！

我想要event.targetdom 层次结构数字索引。基本上，[0][1][2][0]（尽管它可能会以数组的形式返回，[0,1,2,0]这对我来说没关系）。

我知道这可以通过遍历父元素来完成。如果可能的话，我试图避免这种迭代。

编辑编辑 我上次的编辑是一种愚蠢的行为。

4

3 回答 3

6

一种无需显式迭代即可获得索引的方法是使用数组 indexOf 方法。

这是它的样子，e 是你的事件：

function getIndex(e){
  var t=e.target;
  return Array.prototype.indexOf.call(t.parentNode.childNodes,t);
}

这种技术有很多陷阱。首先， indexOf 仅被最新的浏览器支持。其次，您需要调用技巧，因为 NodeList 不是数组。第三，childNodes 可能返回比预期更多的节点，然后您必须按节点类型进行过滤。

要获取整个层次结构索引，只需在使用 parentNode 爬上 DOM 层次结构时重复并重复。

作为记录， e.target 也不是跨浏览器，但我看到这是您已经在使用的。

[更新] 完整代码，使用子节点而不是子节点：

function getIndex(e) {
var index=[],
    t=e.target;

while (t!==document.body) {
    index.unshift(Array.prototype.indexOf.call(t.parentElement.children,t));
    t=t.parentElement;
}
return index;
}
于 2012-10-31T06:04:08.367 回答
3

我知道您想避免迭代，但这可能是最直接的策略：

$(document).on('click','a', function(e){
  var result=[];
  var count = function(e){
    if(e.parentNode != document.body ){
      result.push(e);
      count(e.parentNode);
   }else {
      return result;                                    
   }
 };
 count(e.target)
 console.log(result);
});

您试图避免迭代的原因是什么？dom是巨大的还是什么？

于 2012-10-30T21:01:47.887 回答
1

您说“元素将在页面上快速动态地变化”并且您正在“尝试在 javascript 中创建一个模仿 dom 中元素位置的数组”。这意味着您不仅需要重新计算移动元素的索引路径，还需要重新计算未移动元素的索引路径。

底线：不是计算单个元素的路径，而是遍历整个层次结构对我来说是有意义的，因为无论如何你需要重新计算的不是一个，而是所有的索引路径。

于 2012-10-30T21:55:41.810 回答