Access to index of element in array of elements with common classname

Question

Just as I said in subject, when I try to find index of certain element that is in array created of elements with common class name with code: 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 don't have an `indexOf` method. Also, post the code in the question. If you can't post a link there's a reason for it. — elclanrs, Nov 14 '14 at 03:39
Please paste the relevant code INTO your question. External references can be helpful, but cannot be the only source of the code in question. — jfriend00, Nov 14 '14 at 03:40

score 1 · Accepted Answer · answered Nov 14 '14 at 03:54

As many have pointed out document.getElementsByClassName("myclass"); returns a NodeList and not an array. So you can not exploit native array methods like indexOf or forEach. From the docs:

NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them, however they don't have those methods.JavaScript has an inheritance mechanism based on prototypes for both built–in objects (like Arrays) and host objects (like NodeLists). Array instances inherit array methods (such as forEach or map) because their prototype chain looks like the following:

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

That said, you would basically want to convert the NodeList to an array. You could do something like:

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

Hope it gets you started in the right direction.

Seems a bit verbose, I'd do `toArray=Array.call.bind([].slice)` — elclanrs, Nov 14 '14 at 03:56

score 0 · Answer 2 · edited May 23 '17 at 10:33

This process can be done by many way, but as per me ,you can also do this as below, but still i recommend to use jquery. I just write here code as you can understand,

I use querySelectorAll which return all element having class o in it. because getElementByClass name not supported by all browser : check this link : getElementByClass not support in IE8

loop through all and match object.

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>

score 0 · Answer 3 · edited May 23 '17 at 12:18

Since the object returned from getElementsByClassName is "array like" you could do the following:

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

Because pe is "array like", indexOf will work but you have to invoke indexOf directly from Array.prototype and then set the invoking object (this) with .call.

The object returned from getElementsByClassName is a HTMLCollection. To see what you can do with this object you can check out the following documentation.

Tip for the future: press F12 in Chrome or right click any element and choose "inspect element". This will open the development tools and in the console tab you'll see errors.

You would have seen that pe does not have a function called indexOf because it is not an instance of Array and indexOf is on Array.prototype.

More on prototype and constructor functions (Array is a native constructor function) here.

Access to index of element in array of elements with common classname

3 Answers3