JavaScript DOM:在容器中查找元素索引

Question

我需要通过对象引用在其容器内找到元素索引.奇怪的是,我找不到一个简单的方法.没有jQuery请 - 只有DOM.

UL
 LI
 LI
 LI - my index is 2
 LI

是的,我可以为每个元素分配ID并循环遍历所有节点以匹配ID,但这似乎是一个糟糕的解决方案.是不是有更好的东西？

所以,假设我有一个对象引用第三个LI,如上例所示.我怎么知道它是索引2？

谢谢.

Answer 1

你可以使用Array.prototype.indexOf.为此,我们需要在某种程度上将"演员" HTMLNodeCollection变成真实的Array.例如:

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>

Answer 2

2017年更新

下面的原始答案假定OP想要包括非空文本节点和其他节点类型以及元素.我现在似乎不清楚这是否是一个有效的假设.

假设你只是想要元素索引,previousElementSibling现在得到了很好的支持(2012年不是这种情况),现在是明显的选择.以下(与此处的其他答案相同)将适用于IE <= 8以外的所有主要内容.

function getElementIndex(node) {
    var index = 0;
    while ( (node = node.previousElementSibling) ) {
        index++;
    }
    return index;
}

原始答案

只要使用previousSibling,直到你击中null.我假设您要忽略仅限空格的文本节点; 如果要过滤其他节点,请相应调整.

function getNodeIndex(node) {
    var index = 0;
    while ( (node = node.previousSibling) ) {
        if (node.nodeType != 3 || !/^\s*$/.test(node.data)) {
            index++;
        }
    }
    return index;
}

Answer 3

我是怎么做的(2018年的版本？):

const index = [...el.parentElement.children].indexOf(el);

Tadaaaam.而且,如果你想要考虑原始文本节点,你可以这样做:

const index = [...el.parentElement.childNodes].indexOf(el);

我将子节点传播到数组中,因为它们是HTMLCollection(因此它们不能与indexOf一起使用).

小心你正在使用Babel或浏览器覆盖范围足以满足你需要实现的目标(想想扩展运算符,它基本上是一个Array.from后面的场景).

Answer 4

Array.prototype.indexOf.call(this.parentElement.children, this);

或使用let声明.

Answer 5

对于just元素,这可用于在其兄弟元素中查找元素的索引:

function getElIndex(el) {
    for (var i = 0; el = el.previousElementSibling; i++);
    return i;
}

请注意,previousElementSiblingIE <9不支持.

Answer 6

您可以使用它来查找元素的索引:

Array.prototype.indexOf.call(yourUl, yourLi)

这例如记录所有索引:

var lis = yourList.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    console.log(Array.prototype.indexOf.call(lis, lis[i]));
}?

的jsfiddle

Answer 7

现代本机方法可以使用 'Array.from()' - 例如：`

const el = document.getElementById('get-this-index')
const index = Array.from(document.querySelectorAll('li')).indexOf(el)
document.querySelector('h2').textContent = `index = ${index}`

<ul>
  <li>zero
  <li>one
  <li id='get-this-index'>two
  <li>three
</ul>
<h2></h2>

`

Answer 8

    const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
    const index = nodes.indexOf(el);
    console.log('index = ', index);