How to get the index of the element in javascript?

Question

The NodeList don't have a indexOf(element) method? So, how can I get the element index?

can you un-accept the accepted answer please? The person who wrote it even agrees it's not the best answer — Boris Verkhovskiy, Dec 23 '19 at 22:22

score 75 · Answer 1 · edited Dec 14 '17 at 01:05

75

You can use Array.prototype.indexOf.call() like this

let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

edited Dec 14 '17 at 01:05

Boris Verkhovskiy

14,854
11
100
103

answered Sep 23 '10 at 17:32

kennebec

102,654
32
106
127

12

To make it mega obvious, usage is like `Array.prototype.indexOf.call(haystack, needle);` – wkille Sep 23 '20 at 09:36

score 28 · Answer 2 · edited Nov 15 '22 at 03:09

28

The NodeList object is an Array-like object. So it's possible to "convert" it into an Array using Array.prototype.slice.call()

var arr = Array.prototype.slice.call(yourNodeListObject); // Now it's an Array.
arr.indexOf(element); // The index of your element :)

On browsers that support ES6 you can also do this with Array.from()

const arr = Array.from(yourNodeListObject);

or using the spread operator ...

const arr = [...yourNodeListObject];

edited Nov 15 '22 at 03:09

Brandon

3,572
2
12
27

answered Sep 23 '10 at 16:02

Golmote Kinoko

898
5
8

You can use it like this: `var listOfElements = Array.prototype.slice.call(node.parentElement.children), // Now it's an Array. indexInList = listOfElements.indexOf(node);` – Marian07 Jul 13 '22 at 17:42

Martijn · Accepted Answer · 2019-04-23T09:10:40.007

15

By iterating over the elements, and checking if it matches.

Generic code that finds the index of the element within it's parents childNodes collection.

function index(el) {
    var children = el.parentNode.childNodes,
        i = 0;
    for (; i < children.length; i++) {
        if (children[i] == el) {
            return i;
        }
    }
    return -1;
}

Usage:

// should return 4
var idx = index(document.body.childNodes[4]);

EDIT: I can't delete an accepted answer, but @kennebec's answer below is much better, which I'll quote verbatim:

You can use Array.prototype.indexOf.call() like this
let nodes = document.getElementsByTagName('*');
Array.prototype.indexOf.call(nodes, document.body);

edited Apr 23 '19 at 09:10

answered Sep 23 '10 at 15:38

Martijn

11,964
12
50
96

5

is there a design reason the nodelist doesn't have an indexof operation? – amwinter Dec 20 '12 at 17:09
4

use Array.prototype.indexOf.call(NodeList, element) – anandaravindan Nov 20 '15 at 22:30
1

I wish I could upvote your username other than the answer @try-catch-finally – handris Apr 23 '19 at 06:33

score 2 · Answer 4 · answered Sep 28 '19 at 21:45

2

Just add one line in your script:

NodeList.prototype.indexOf = Array.prototype.indexOf;   // for IE11

Then use indexOf as usual:

var index = NodeList.indexOf(NodeElement);

answered Sep 28 '19 at 21:45

Павел П

109
3

it seems to work, OK. But why ? could you explain ? – Chrysotribax Sep 27 '21 at 11:36
More explanation would be nice. But on face value it seems to be just a roundabout way of casting into an array which is why it works the same way as the answers above. – 4127157 Apr 19 '22 at 16:23

score 1 · Answer 5 · answered Oct 05 '20 at 13:07

Let us say you have the following line:

const list=document.querySelectAll('.some_class .someother_class');

list will be a nodelist. So we can convert the nodelist to an array and create a new array of indexes as follows:

const indexArr= [...list].map( element => return [...list].indexOf(element) );

indexArr contains all the indexes of elements in the original list.

How to get the index of the element in javascript?

5 Answers5

Linked

Related