查找DOM节点索引

Question

我想找到给定DOM节点的索引.这就像做的反过来

document.getElementById('id_of_element').childNodes[K]

我想提取K给定的值,我已经有了对子节点和父节点的引用.我该怎么做呢？

Answer 1

在所有版本的Safari,FireFox,Chrome和IE> = 9中,最短的方式,没有任何框架:

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

Answer 2

要短一点,期望元素在elem中,返回k.

for (var k=0,e=elem; e = e.previousSibling; ++k);

在Justin Dearing的评论之后,我回顾了我的回答并添加了以下内容:

或者如果你喜欢"同时":

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

最初的问题是如何找到现有DOM元素的索引.我在本回答中的上述两个示例都希望elem是一个DOM元素,并且该元素仍然存在于DOM中.如果你给它们一个空对象或没有previousSibling的对象,它们将失败.更简单的方法是这样的:

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}   

如果e为null或者其中一个对象中缺少previousSibling,则k为-1.

Answer 3

我认为做到这一点的唯一方法是循环遍历父母的孩子，直到找到自己。

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');