如何在javascript中获取元素的索引？

Question

NodeList 没有 indexOf(element) 方法？ 那么，如何获取元素索引呢？

Answer 1

你可以像这样使用Array.prototype.indexOf.call()

let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

Answer 2

NodeList 对象是一个类似数组的对象。 因此可以使用Array.prototype.slice.call()将其“转换”为数组

var arr = Array.prototype.slice.call(yourNodeListObject); // Now it's an Array.
arr.indexOf(element); // The index of your element :)

在支持 ES6 的浏览器上，您也可以使用Array.from()

const arr = Array.from(yourNodeListObject);

或使用扩展运算符...

const arr = [...yourNodeListObject];

Answer 3

通过迭代元素，并检查它是否匹配。

在其childNodes集合中查找元素索引的通用代码。

function index(el) {
    var children = el.parentNode.childNodes,
        i = 0;
    for (; i < children.length; i++) {
        if (children[i] == el) {
            return i;
        }
    }
    return -1;
}

用法：

// should return 4
var idx = index(document.body.childNodes[4]);

编辑：我无法删除已接受的答案，但下面@kennebec 的答案要好得多，我将逐字引用：

你可以像这样使用Array.prototype.indexOf.call()

 let nodes = document.getElementsByTagName('*'); Array.prototype.indexOf.call(nodes, document.body);

Answer 4

假设您有以下行：

const list=document.querySelectAll('.some_class .someother_class');

list 将是一个节点列表。 因此，我们可以将节点列表转换为数组并创建一个新的索引数组，如下所示：

const indexArr= [...list].map( element => return [...list].indexOf(element) );

indexArr 包含原始列表中元素的所有索引。

Answer 5

只需在脚本中添加一行：

NodeList.prototype.indexOf = Array.prototype.indexOf;   // for IE11

然后像往常一样使用indexOf ：

var index = NodeList.indexOf(NodeElement);