Question

我想找到给定DOM节点的索引。这就像做

的反过来

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

我想提取K的值，因为我已经有了对子节点和父节点的引用。我该怎么做呢？

Answer 1

在Safari，FireFox，Chrome和IE的所有版本中，没有任何框架的最短路径＆gt; = 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

RoBorg的答案有效......或者你可以试试......

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);

Answer 4

现代原生方法可能包括Array.from(e.children).indexOf(theChild)

没有IE支持，但Edge工作：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Answer 5

与原始海报一样，我试图

找到给定DOM节点的索引

但是我只使用了点击处理程序，而仅与其兄弟有关。我无法最终完成上述工作（因为无可奈何，我试图在'这个'中为elem做准备，但它没有用。）

我的解决方案是使用jquery并使用：

var index = $(this).parent().children().index(this);

无需指定元素的类型，即：'h1'或id等。

Answer 6

我认为这样做的唯一方法就是绕过父母的孩子，直到找到自己为止。

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?!');

Answer 7

使用像原型这样的框架你可以使用它：

$(el).up().childElements().indexOf($(el))

查找DOM节点索引

7 个答案: