32

根据 jQuery api，对 .get() 的补充操作，它接受一个索引并返回一个 DOM 节点，.index()可以接受一个 DOM 节点并返回一个索引。假设我们在页面上有一个简单的无序列表：

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

.index()将返回匹配元素集中第一个元素相对于其兄弟元素的位置：

alert('Index: ' + $('#bar').index();

我们取回列表项从零开始的位置：

Index: 1

我只是想知道，我们如何使用JavaScript做同样的事情？

4

5 回答 5

23

您可以构建自己的功能：

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    var num = 0;
    for (var i=0; i<children.length; i++) {
         if (children[i]==node) return num;
         if (children[i].nodeType==1) num++;
    }
    return -1;
}

演示（打开控制台）

于 2012-12-01T09:15:35.073 回答
17

我已经修改了Travis J 的答案，不包括 TextNodes 并从中制作了一个函数。

您可以在控制台中运行它并查看（在 stackoverflow 上）。

经典方式：

function getNodeindex( elm ){ 
    var c = elm.parentNode.children, 
        i = c.length;
        
    while(i--) 
      if( c[i] == elm ) 
        return i
}

使用 ES2015：

const getNodeindex = elm => [...elm.parentNode.children].findIndex(c => c == elm)

// or

const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)

演示：

const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)
<button onclick="console.log(  getNodeindex(this)  )">get index</button>
<button onclick="console.log(  getNodeindex(this)  )">get index</button>
<button onclick="console.log(  getNodeindex(this)  )">get index</button>

我还想指出关于同一问题的另一个线程，它有一个很好的答案（对于寻求旧版 IE 支持的人）

于 2016-10-14T21:07:05.417 回答
5

不需要循环，请Array#indexOf调用.parentElement.children：

const element = document.querySelector('#baz');

[].indexOf.call(element.parentElement.children, element);
// => 2

你甚至可以在一个随机的元素列表上调用它，就像在 jQuery 中一样：

const list = document.querySelectorAll('li');
const element = document.querySelector('#baz');

[].indexOf.call(list, element);
// => 2
于 2019-03-19T07:18:23.063 回答
1

您可以通过使用 previousElementSibling 和递增的 dom 树向上查找此信息。

var getElementIndex(element) {
    if (!element) {
        return -1;
    }
    var currentElement = element,
        index = 0;

    while(currentElement.previousElementSibling) {
        index++;
        currentElement = currentElement.previousElementSibling;
    }
    return index
}

getElementIndex(document.getElementById('#bar'));

这是对 previousElementSibling 的浏览器支持：

https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

于 2015-06-19T17:46:43.993 回答
0

通过这种方式可以找到索引

    Array.from(children).findIndex(element => element.id === "bar")
于 2020-08-31T16:48:23.033 回答