Finding the index of the element with class in native Javascript

Question

Is there a way to get the index of class name (I.e. the third element with the class "className" would be 3 without using jQ?

I don't know jQ, and I don't have time to learn it right now, and I don't want to include code into my code that I don't understand at least some.

Thanks.

BTW, I've used jQ instead of spelling it out so those results can be filtered out in Google should somebody have the same question. If I spelled it out, and somebody used the NOT operator in Google, this one would also disappear.

The is the index() method in jQuery http://api.jquery.com/index/ — Ahmad, Nov 05 '13 at 08:20
Possible duplicate of [Fastest way to find the index of a child node in parent](http://stackoverflow.com/questions/13656921/fastest-way-to-find-the-index-of-a-child-node-in-parent) — Sceptic, Oct 11 '16 at 15:41

score 20 · Answer 1 · answered Nov 05 '13 at 08:30

20

You could do something like:

// 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);

See: Array's indexOf. If you have already a proper array as nodes instead of a NodeList, you can just do nodes.indexOf(target).

answered Nov 05 '13 at 08:30

ZER0

24,846
5
51
54

I might be wrong, but I remember indexOf not being supported in older browsers like IE8. Still, I don't know if this limitation applied to nodes collections AND arrays or only arrays. – Saturnix Nov 05 '13 at 08:31
Yes, that's why I added the link as well. If older browsers are a concern, I honestly think that the OP have bigger problem than that in DOM manipulation, and should use jQuery. However, in the link, there is also a shim – personally nowadays I would use a ES5 shim always for older browsers. Also, if the browser support `querySelectorAll`, it should support `indexOf` too, so I do not see a big issue here. Again, it depends if he wants target modern browsers or not. In the second scenario, I will suggest jQuery, or at least ES5 shim. – ZER0 Nov 05 '13 at 08:34
1

Array.prototype.indexOf.call(nodes, target); This achieves the same, but looks a bit more professional – Caleb Hillary Jul 10 '21 at 18:18

Saturnix · Accepted Answer · 2013-11-05T08:30:37.840

6

you can use document.getElementsByClassName

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

el[i] is the element in the current iteration, i is the index

(I.e. the third element with the class "className" would be 3)

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

JsFiddle: here.

edited Nov 05 '13 at 08:30

answered Nov 05 '13 at 08:23

Saturnix

10,130
17
64
120

+1 for non-jQ answer as asked. I'd prefer to use `document.querySelectorAll`, but eh. – Exelian Nov 05 '13 at 08:24
I've prepared a different one. Still, same principle applies. – Saturnix Nov 05 '13 at 08:30
In Response To: Ayman Safadi The demo you provide unfortunately doesn't apply to the question and with it you have added an additional value in simply retrieving the node's current index. To others please disregard as: var a = document.getElementsByClassName('elementClass'); var aValue = a[0]; Is the same as simply saying document.getElementsByClassName('elementClass')[0] – Brian Ellis Aug 20 '15 at 18:31

aIKid · Answer 3 · 2013-11-05T08:34:54.773

0

Just use getElementsByClassName, it returns a list of elements with the specified classes.

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

Hope this helps!

edited Nov 05 '13 at 08:34

answered Nov 05 '13 at 08:25

aIKid

26,968
4
39
65

score 0 · Answer 4 · answered Feb 04 '22 at 07:22

0

these work as of es6:

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

or

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

answered Feb 04 '22 at 07:22

yorgo

1,354
13
10

Finding the index of the element with class in native Javascript

4 Answers4

Linked