Question

70

Get index of class

rated 0 times [ 74] [ 4] / answers: 1 / hits: 24376 / 9 Years ago, wed, january 20, 2016, 12:00:00

I'm trying to get the index of an element in a class. For example if I have a class called myClass with 5 elements, and the fourth element has an id of fourth, I want to get the index number of #fourth from the class.

I tried using indexOf like this:

var myClass = document.getElementsByClassName('myClass');

var fourth = document.getElementById('fourth');



console.log(myClass.indexOf(fourth));

But I get an error saying:

Uncaught TypeError: myClass.indexOf is not a function

JSFiddle

Code Snippet

var myClass = document.getElementsByClassName('myClass');

var fourth = document.getElementById('fourth');



console.log(myClass.indexOf(fourth));

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass id=fourth></div>

<div class=myClass></div>

I then tried creating my own function that gets the index from the class:

function indexInClass(node) {

    var className = node.className;

    var num = 0;

    for (var i = 0; i < className.length; i++) {

        if (className[i] === node) {

            return num;

        }

        num++;

    }

    return -1;

}

But I get undefined when I use it.

How can I get the index of the class?

JSFiddle

Code Snippet

var myClass = document.getElementsByClassName('myClass');

var fourth = document.getElementById('fourth');



function indexInClass(node) {

  var className = node.className;

  var num = 0;

  for (var i = 0; i < className.length; i++) {

    if (className[i] === node) {

      return num;

    }

    num++;

  }

  return -1;

}



console.log(myClass[indexInClass(fourth)]);

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass id=fourth></div>

<div class=myClass></div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josh

Add To Favorites

Follow

Total Points: 391

Total Questions: 112

Total Answers: 90

Location: Aruba

Member since Fri, Jun 24, 2022

2 Years ago

answered 9 Years ago mckaylab · Accepted Answer

getElementsByClassName returns an HTML collection, not an array, thus you cannon use indexOf on it.

Iterating over the elements is the way to go, but the problem with your custom function was this:

for (var i = 0; i < className.length; i++) {

You were iterating over className, which is a string containing your node's class name, while instead you should be iterating over your element collection myClass.

Here's your custom function fixed:

var myClass = document.getElementsByClassName('myClass');

var fourth = document.getElementById('fourth');



function indexInClass(node) {

  var className = node.className;

  var num = 0;

  for (var i = 0; i < myClass.length; i++) {

    if (myClass[i] === node) {

      return num;

    }

    num++;

  }

  return -1;

}



console.log(myClass[indexInClass(fourth)]);

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass id=fourth></div>

<div class=myClass></div>

UPDATE

Thanks for the answer! I want to create a function that I can use anywhere, meaning, not specific to myClass. How can I achieve that?

Here's a sligthly optimized version of your function:

function indexInClass(collection, node) {

  for (var i = 0; i < collection.length; i++) {

    if (collection[i] === node)

      return i;

  }

  return -1;

}



var myClass = document.getElementsByClassName('myClass');

var fourth = document.getElementById('fourth');



alert(The ID is:  + indexInClass(myClass, fourth));

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass id=fourth></div>

<div class=myClass></div>

UPDATE 2

Is there a way to do it without the collection argument? For example, is there a way to get the class from the id?

function indexInClass(node) {

  var collection = document.getElementsByClassName(node.className);

  for (var i = 0; i < collection.length; i++) {

    if (collection[i] === node)

      return i;

  }

  return -1;

}



var fourth = document.getElementById('fourth');



alert(The ID is:  + indexInClass(fourth));

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass></div>

<div class=myClass id=fourth></div>

<div class=myClass></div>

Be careful with .className because it will work properly if the node has one class. If you expect more, you'd need to extract the common one, either from className or classList.