JavaScript DOM:在容器中查找元素索引 [英] JavaScript DOM: Find Element Index In Container
问题描述
我需要通过对象引用在其容器内找到元素的索引。奇怪的是,我找不到一个简单的方法。没有jQuery请 - 只有DOM。
I need to find an index of element inside its container by object reference. Strangely, I cannot find an easy way. No jQuery please - only DOM.
UL
LI
LI
LI - my index is 2
LI
是的,我可以为每个元素分配ID并循环遍历所有节点以匹配ID,但它似乎是一个坏的解决方案。是不是有更好的东西?
Yes, I could assign IDs to each element and loop through all nodes to match the ID but it seems a bad solution. Isn't there something nicer?
所以说,我有一个对象引用第三个LI,如上面的例子。如何知道这是索引2?
So, say I have an object reference to the third LI as in the example above. How do I know it is index 2?
谢谢。
推荐答案
您可以使用 Array.prototype.indexOf
。为此,我们需要将HTMLNodeCollection转换成一个真正的数组
。例如:
You could make usage of Array.prototype.indexOf
. For that, we need to somewhat "cast" the HTMLNodeCollection into a true Array
. For instance:
var nodes = Array.prototype.slice.call( document.getElementById('list').children );
然后我们可以调用
nodes.indexOf( liNodeReference );
示例:
var nodes = Array.prototype.slice.call( document.getElementById('list').children ),
liRef = document.getElementsByClassName('match')[0];
console.log( nodes.indexOf( liRef ) );
<ul id="list">
<li>foo</li>
<li class="match">bar</li>
<li>baz</li>
</ul>
这篇关于JavaScript DOM:在容器中查找元素索引的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!