Question

根据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 ？

Answer 1

您可以构建自己的功能：

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;
}

Demonstration (open the console)

Answer 2

我已将Travis J answer修改为不包含TextNodes并从中创建了一个函数。

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

经典方式：

function getNodeindex( elm ){ 
    var c = elm.parentNode.children, i = 0;
    for(; i < c.length; i++ )
        if( c[i] == elm ) return i;
}

// try it
var el = document.getElementById("sidebar");
getNodeindex(el);

使用ES2015：

function getNodeindex( elm ){ 
    return [...elm.parentNode.children].findIndex(c => c == elm)
    // or
    return [...elm.parentNode.children].indexOf(elm)
}

我还想指出另一个关于同一问题的线程，它有一个great answer（对于那些寻求旧IE支持的人）

Answer 3

不需要循环，请在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

或者，如果您只想从element本身获取索引：

Answer 4

你可以通过使用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

Answer 5

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

    Array.from(children).findIndex(element => element.id === "bar")

在vanilla javascript中的jQuery index（）

5 个答案:

经典方式：

使用ES2015：