Question

请不要使用图书馆解决方案，但如果您知道有这样的解决方案，我很高兴看看他们是如何做到这一点的。并不十分关注后备和跨浏览器支持。

我有一个等级（会改变）：

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

我在<a>Click Me!</a>上有一个事件监听器并返回一个事件对象。那很有用。 YEY！

我想要event.target dom层次数字索引。基本上，[0][1][2][0]（虽然它可能会返回一个数组，[0,1,2,0]，这对我来说没问题。）

我知道这可以通过迭代父元素来完成。我正在尝试避免迭代，如果可能的话。

修改将我的上次编辑作为白痴行为进行编辑。

Answer 1

获取没有显式迭代的索引的方法是使用数组indexOf方法。

这就是你的活动：

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

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

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

对于记录，e.target也不是跨浏览器，但我发现这是你已经使用的。

[更新]完整代码，使用children而不是childNodes：

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;
}

Answer 2

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

$(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);
});

你为什么试图避免迭代？是巨大的还是什么？

Answer 3

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

底线：不是计算单个元素的路径，而是迭代整个层次结构，因为无论如何你需要重新计算不是一个，而是所有索引路径。

获取目标元素的（数字）dom层次结构javascript

3 个答案: