访问具有公共类名的元素数组中的元素索引答案

【问题标题】：Access to index of element in array of elements with common classname访问具有公共类名的元素数组中的元素索引
【发布时间】：2014-11-14 14:49:23
【问题描述】：

正如我在主题中所说，当我尝试查找某个元素的索引时，该元素位于由具有公共类名的元素创建的数组中，代码为：document.getELementsByClassName("blabla")。

var a, b, pe;
    a=document.getElementById("a");    
    b=document.getElementById("b");
    pe=document.getElementsByClassName("o");
    var k=pe.indexOf(b);
    alert(k);

<p class="o" id="a"></p>
<p class="o" id="b"></p>

【问题讨论】：

HTMLCollections 没有indexOf 方法。另外，在问题中发布代码。如果您无法发布链接，那是有原因的。
请将相关代码粘贴到您的问题中。外部引用可能会有所帮助，但不能是相关代码的唯一来源。
为什么不使用 jquery ？

标签： javascript

【解决方案1】：

正如许多人指出的那样，document.getElementsByClassName("myclass"); 返回的是 NodeList 而不是数组。所以你不能利用像indexOf或forEach这样的原生数组方法。来自docs：

NodeList 的使用非常类似于数组，在它们上使用 Array.prototype 方法会很诱人，但是它们没有这些方法。JavaScript 具有基于两者原型的继承机制内置对象（如数组）和宿主对象（如 NodeLists）。数组实例继承数组方法（例如 forEach 或 map），因为它们的原型链如下所示：

myArray --> Array.prototype --> Object.prototype --> null (The prototype chain of an object can be obtained by calling Object.getPrototypeOf several times.)

也就是说，您基本上希望将 NodeList 转换为数组。你可以这样做：

var turnObjToArray = function(obj) {
  return [].map.call(obj, function(element) {
   return element;
 })
};

var a=document.getElementById("a");    
var b=document.getElementById("b");
var pe=document.getElementsByClassName("o");
var listBox = turnObjToArray(pe);
console.log(listBox);
alert(listBox.indexOf(a)); //Normal array methods can be used here.

DEMO

希望它能让你朝着正确的方向开始。

【讨论】：

似乎有点冗长，我会做toArray=Array.call.bind([].slice)

【解决方案2】：

此过程可以通过多种方式完成，但根据我的说法，您也可以按以下方式执行此操作，但我仍然建议使用 jquery。我这里只是写你能理解的代码，

我使用 querySelectorAll 来返回所有包含 o 类的元素。因为并非所有浏览器都支持 getElementByClass 名称：请查看此链接：getElementByClass not support in IE8

遍历所有对象并匹配对象。

var a=document.getElementById("a");    
var b=document.getElementById("b");
var v=document.getElementById("v");
var pe=document.querySelectorAll('.o');
for( i in pe)
{
    if(v == pe[i])
    {
        alert("found index "+i);
    }
}

<p class="o" id="a"></p>
<p class="o" id="b"></p>
<p class="o" id="v"></p>

【讨论】：

【解决方案3】：

由于从 getElementsByClassName 返回的对象是“类似数组”，您可以执行以下操作：

var k = Array.prototype.indexOf.call(pe,b);

因为 pe 是“类似数组”，所以 indexOf 可以工作，但您必须直接从 Array.prototype 调用 indexOf，然后使用 .call 设置调用对象 (this)。

从 getElementsByClassName 返回的对象是一个 HTMLCollection。要了解您可以使用此对象做什么，您可以查看following documentation。

未来提示：在 Chrome 中按 F12 或右键单击任何元素并选择“检查元素”。这将打开开发工具并在控制台选项卡中看到错误。

你会看到 pe 没有一个名为 indexOf 的函数，因为它不是 Array 的实例，并且 indexOf 在 Array.prototype 上。

更多关于原型和构造函数（Array 是原生构造函数）here。

【讨论】：