javascript - 在本机 Javascript 中查找具有类的元素的索引

Question

有没有办法获取类名的索引（即，类“className”的第三个元素将是 3，而不使用 jQ？

我不知道jQ，我现在没有时间学习它，我不想在我的代码中包含我至少不理解的代码。

谢谢。

顺便说一句，我使用 jQ 而不是拼写出来，所以如果有人有同样的问题，这些结果可以在谷歌中被过滤掉。如果我把它拼出来，并且有人在 Google 中使用了 NOT 运算符，那么这个运算符也会消失。

Answer 1

您可以执行以下操作：

// the element you're looking for
var target = document.getElementById("an-element");

// the collection you're looking in
var nodes = document.querySelectorAll(".yourclass");

var index = [].indexOf.call(nodes, target);

请参阅：数组的 indexOf。如果你已经有一个合适的数组nodes而不是 NodeList，你可以只做nodes.indexOf(target).

Answer 2

你可以使用document.getElementsByClassName

var el = document.getElementsByClassName('className');
for (var i = 0; i < el.length; i++) {
   // your index is inside here
}

el[i]是当前迭代中的元素，i是索引

（即“className”类的第三个元素是 3）

if (i == 3)
return el[i]

---

JsFiddle：在这里。

Answer 3

只需使用getElementsByClassName，它就会返回具有指定类的元素列表。

elements = document.getElementsByClassName("test")
element = elements[2] //get the 3rd element

希望这可以帮助！

Answer 4

这些工作从 es6 开始：

Array.from(document.querySelectorAll('.elements')).indexOf(anElement)

或者

[...document.querySelectorAll('.elements')].indexOf(anElement)