请不要使用图书馆解决方案,但如果您知道有这样的解决方案,我很高兴看看他们是如何做到这一点的.并不十分关注后备和跨浏览器支持.
我有一个层次结构(将改变):
<body>
<div></div>
<div>
<div></div>
<div></div>
<div>
<a>Click Me!</a>
</div>
</div>
</body>
我有一个事件监听器<a>Click Me!</a>并返回一个事件对象.那很有用.YEY!
我想要event.targetdom层次数字索引.基本上,[0][1][2][0](虽然它可能会以数组的形式返回[0,1,2,0],但这对我来说没问题).
我知道这可以通过迭代父元素来完成.如果可能的话,我试图避免这种迭代.
编辑 将我的上次编辑重写为白痴行为.
在没有显式迭代的情况下获取索引的方法是使用数组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也不是跨浏览器,但我看到这是你已经使用的.
[更新]完整代码,使用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;
}
| 归档时间： |
|
| 查看次数： |
2615 次 |
| 最近记录： |