JavaScript DOM: Find Element Index In Container

Question

I need to find an index of element inside its container by object reference. Strangely, I cannot find an easy way. No jQuery please - only DOM.

UL
 LI
 LI
 LI - my index is 2
 LI

Yes, I could assign IDs to each element and loop through all nodes to match the ID but it seems a bad solution. Isn't there something nicer?

So, say I have an object reference to the third LI as in the example above. How do I know it is index 2?

Thanks.

why not perform a previousSibling on the li reference until you hit null? — Ashwin Prabhu, Aug 01 '12 at 15:04
possible duplicate of [Finding DOM node index](http://stackoverflow.com/questions/378365/finding-dom-node-index) — Dan Dascalescu, Dec 08 '14 at 04:40
I think it would be easy if you add custom attribute to the li element. For example,

score 115 · Accepted Answer · edited Aug 03 '17 at 18:43

115

You could make usage of Array.prototype.indexOf. For that, we need to somewhat "cast" the HTMLNodeCollection into a true Array. For instance:

var nodes = Array.prototype.slice.call( document.getElementById('list').children );

Then we could just call:

nodes.indexOf( liNodeReference );

Example:

var nodes = Array.prototype.slice.call( document.getElementById('list').children ),
    liRef = document.getElementsByClassName('match')[0];

console.log( nodes.indexOf( liRef ) );

<ul id="list">
    <li>foo</li>
    <li class="match">bar</li>
    <li>baz</li>    
</ul>

edited Aug 03 '17 at 18:43

Nathan Arthur

8,287
7
55
80

answered Aug 01 '12 at 15:01

jAndy

231,737
57
305
359

3

Note: `.childNodes` and `.children` are different things. `.children` is a subset, a list of all `ElementNodes` only. – Ian Clark Jun 20 '14 at 08:43
3

The [`previousElementSibling` solution](http://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container#comment29654968_11762728) is better because it will exclude text nodes and will return the index of the element that you expect. – Dan Dascalescu Dec 08 '14 at 06:53
5

ES6 syntax: `const index = [...el.parentNode.children].indexOf(el)` – ESR Jul 12 '18 at 12:58
4

I'd actually much prefer `Array.from( el.parentNode.children ).indexOf( el );` on that instance, just for readability. – jAndy Jul 13 '18 at 17:25
`Array.prototype.indexOf.call(nodes, node)` works for me. – Tavin Jul 10 '23 at 22:59

score 88 · Answer 2 · answered Apr 04 '18 at 08:59

88

Here is how I do (2018 version ?) :

const index = [...el.parentElement.children].indexOf(el);

Tadaaaam. And, if ever you want to consider raw text nodes too, you can do this instead :

const index = [...el.parentElement.childNodes].indexOf(el);

I spread the children into an array as they are an HTMLCollection (thus they do not work with indexOf).

Be careful that you are using Babel or that browser coverage is sufficient for what you need to achieve (thinkings about the spread operator which is basically an Array.from behind the scene).

answered Apr 04 '18 at 08:59

Julien BONNIN

880
6
3

2

Really cool! Just added `Array.from` to the childNodes respectively `const index = [...Array.from(el.parentElement.children)].indexOf(el);` – David Dal Busco Jan 29 '20 at 16:01
2

If used as part of an interview - you should mention that Array.from ( or [...] ) will create a shallow copy of the collection - whilst Array.prototype.indexOf.call wont. – CWright Aug 31 '20 at 11:33
3

when using `[...el.parentElement.children]`, with typescript, raises the error: _Type 'HTMLCollection' is not an array type or does not have a '[Symbol.iterator]()' method that returns an iterator._ in this case better this approach: `Array.from(el.parentElement.children)` – darkziul Feb 02 '21 at 13:29
It seems this method will have all children into the array, that is to say all siblings of `el`, but this is not always intended and this method doesn't allow to exclude siblings from the array. For instance `el = document.querySelectorAll('div:not(.exclude)')` – Max Aug 26 '21 at 21:12
2

@DavidDalBusco, you're creating 2 arrays. If you're using Array.from then just `Array.from(el.parentElement.children).indexOf(el)` is sufficient. No need to create an array and then spread that array into yet another array. Also, while `[...children]` is terse, it is creating a temporary array just for the purpose of searching it and then discarding the temporary. If you want speed then `Array.prototype.indexOf.call(el.parentElement.children, el)` should be faster as no temporary array is created. Speed isn't always important and I'd chose `[...children]` most of the time. – gman Jun 08 '22 at 18:35

Tim Down · Answer 3 · 2017-03-31T15:24:24.463

54

2017 update

The original answer below assumes that the OP wants to include non-empty text node and other node types as well as elements. It doesn't seem clear to me now from the question whether this is a valid assumption.

Assuming instead you just want the element index, previousElementSibling is now well-supported (which was not the case in 2012) and is the obvious choice now. The following (which is the same as some other answers here) will work in everything major except IE <= 8.

function getElementIndex(node) {
    var index = 0;
    while ( (node = node.previousElementSibling) ) {
        index++;
    }
    return index;
}

Original answer

Just use previousSibling until you hit null. I'm assuming you want to ignore white space-only text nodes; if you want to filter other nodes then adjust accordingly.

function getNodeIndex(node) {
    var index = 0;
    while ( (node = node.previousSibling) ) {
        if (node.nodeType != 3 || !/^\s*$/.test(node.data)) {
            index++;
        }
    }
    return index;
}

edited Mar 31 '17 at 15:24

answered Aug 01 '12 at 15:37

Tim Down

318,141
75
454
536

6

+1 This is fastest compared to any other method described here. For newer browser, previousElementSibling can be used without these two conditions. – Akash Kava Nov 12 '13 at 12:07
@bjb568: Is your point that there is a set of unnecessary parentheses? – Tim Down Mar 19 '14 at 09:10
2

Not unnecessary. It's not enough. Everyone knows that you need at least another 7 for beauty. – bjb568 Mar 19 '14 at 16:07
@bjb568: Probably best to close them as well. – Tim Down Mar 19 '14 at 16:25
@AkashKava correct, previousElementSibling is the most elegant way. And technically its not possible that indexOf a node can return -1 anyway. Its either the only element then there is no previousElementSibling and index is 0 or there is a previous element then the index is at least 1 – philk Jun 10 '14 at 08:37
@bjb568: the double set of parentheses in the while is necessary to prevent JSHint warning 084. – Dan Dascalescu Dec 08 '14 at 06:51
I added nodeType check to get proper element index: `var nodeType = node.nodeType; ... if (node.nodeType == nodeType && (node.nodeType != 3...` – mykola.rykov Jan 20 '15 at 14:08
@mykola.rykov: I'm probably being stupid but I don't understand what you mean. – Tim Down Jan 20 '15 at 22:18
3

what does this !/^\s*$/.test(node.data) do exactly? – maxlego Feb 27 '16 at 19:59
why don't you use `previousElementSibling` method instead of testing with regexp? – Legotin Mar 27 '17 at 15:49
@legotin: `previousElementSibling` didn't exist at time of writing. Also, this answer doesn't do exactly the same thing: it assumes the OP wants to know about non-empty text nodes as well. It isn't clear from the question whether this assumption is valid or not. – Tim Down Mar 31 '17 at 15:14
@AkashKava How regex can be faster than just to iterate an array??? – Ievgen Dec 26 '20 at 16:19

score 25 · Answer 4 · answered Jan 18 '16 at 21:41

25

Array.prototype.indexOf.call(this.parentElement.children, this);

Or use let statement.

answered Jan 18 '16 at 21:41

Alexander Abashkin

1,187
4
13
18

@citykid, sure, it's more terse but it's silly to create a temporary array just to access a function of that array. – gman Oct 12 '20 at 13:25
@gman The `indexOf` method does not create a temporary array, unlike many other answers (.slice(), .from(), array spread etc.). If you look at [the spec](https://tc39.es/ecma262/#sec-array.prototype.indexof), it will directly iterate on the children list *as if* it is an array, so it is fast. – Sheepy Jun 08 '22 at 15:52
@Sheepy, the comment I was responding to has been deleted. The comment has nothing to do with the answer by Alexander, it has to do with a comment by citykid that suggested `[].indexOf.call(this.parametElement.children, this)`. That does create a temporary array. – gman Jun 08 '22 at 18:13

score 10 · Answer 5 · 2012-08-01T15:02:08.843

10

You can use this to find the index of an element:

Array.prototype.indexOf.call(yourUl, yourLi)

This for example logs all indices:

var lis = yourList.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    console.log(Array.prototype.indexOf.call(lis, lis[i]));
}

JSFIDDLE

edited Aug 01 '12 at 15:02

answered Aug 01 '12 at 14:55

I misinterpreted the question. Edited! – Aug 01 '12 at 15:02
The [`previousElementSibling` solution](http://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container#comment29654968_11762728) is better because it will exclude text nodes and will return the index of the element that you expect. – Dan Dascalescu Dec 08 '14 at 06:53

score 10 · Answer 6 · answered Dec 17 '14 at 08:49

10

For just elements this can be used to find the index of an element amongst it's sibling elements:

function getElIndex(el) {
    for (var i = 0; el = el.previousElementSibling; i++);
    return i;
}

Note that previousElementSibling isn't supported in IE<9.

answered Dec 17 '14 at 08:49

Web_Designer

72,308
93
206
262

1

What if it will not be a previous sibling but next? – Rootical V. Jul 12 '16 at 11:03
2

@RooticalV.: Not sure what you mean. Did you meant to ask what happens if there is no previous sibling? In that case the loop will automatically exit, since the value of the expression "el = el.previousElementSibling" will be false (as it is null). Or did you meant to ask what would happen if you replaced "previousElementSibling" by "nextElementSibling" in the above code? Well, in that case the loop would count the number of siblings still following the element. – HammerNL Oct 11 '16 at 08:50

calipoop · Answer 7 · 2023-05-25T03:42:31.697

8

A modern native approach could make use of 'Array.from()' - for example:

const el = document.getElementById('get-this-index')
const index = Array.from(document.querySelectorAll('li')).indexOf(el)
document.querySelector('h2').textContent = `index = ${index}`

<ul>
  <li>zero
  <li>one
  <li id='get-this-index'>two
  <li>three
</ul>
<h2></h2>

edited May 25 '23 at 03:42

answered Apr 02 '18 at 23:47

calipoop

792
9
31

score 5 · Answer 8 · answered May 13 '19 at 08:52

5

    const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
    const index = nodes.indexOf(el);
    console.log('index = ', index);

answered May 13 '19 at 08:52

Nguyen Anh Vu

121
1
2
4

you could also do `Array.fom` instead of `Array.prototype.slice.call` but the same result – David Morrow Dec 24 '22 at 05:32

score 2 · Answer 9 · answered Sep 29 '15 at 17:07

An example of making an array from HTMLCollection

<ul id="myList">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
var tagList = [];

var ulList = document.getElementById("myList");

var tags   = ulList.getElementsByTagName("li");

//Dump elements into Array
while( tagList.length != tags.length){
    tagList.push(tags[tagList.length])
};

tagList.forEach(function(item){
        item.addEventListener("click", function (event){ 
            console.log(tagList.indexOf( event.target || event.srcElement));
        });
}); 
</script>

score 1 · Answer 10 · edited Aug 03 '17 at 19:15

1

You can iterate through the <li>s in the <ul> and stop when you find the right one.

function getIndex(li) {
    var lis = li.parentNode.getElementsByTagName('li');
    for (var i = 0, len = lis.length; i < len; i++) {
        if (li === lis[i]) {
            return i;
        }
    }

}

Demo

edited Aug 03 '17 at 19:15

Nathan Arthur

8,287
7
55
80

answered Aug 01 '12 at 15:01

gen_Eric

223,194
41
299
337

score 1 · Answer 11 · answered Oct 04 '16 at 20:37

If you want to write this compactly all you need is:

var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;

We just cycle through the elements in the parent node, stopping when we find your element.

You can also easily do:

for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}

if that's all you want to look through.

score 0 · Answer 12 · answered Aug 01 '12 at 15:08

Another example just using a basic loop and index check

HTML

<ul id="foo">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JavaScript runs onload/ready or after ul is rendered

var list = document.getElementById("foo"),
    items = list.getElementsByTagName("li");

list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;
    var myIndex = findIndex(src);
    alert(myIndex);
};

function findIndex( elem ) {
    var i, len = items.length;
    for(i=0; i<len; i++) {
        if (items[i]===elem) {
            return i;
        }
    }
    return -1;
}

Running Example

jsFiddle

score 0 · Answer 13 · answered Aug 01 '12 at 15:08

Just pass the object reference to the following function and you will get the index

function thisindex(elm) 
{ 
    var the_li = elm; 
    var the_ul = elm.parentNode; 
    var li_list = the_ul.childNodes; 

    var count = 0; // Tracks the index of LI nodes

    // Step through all the child nodes of the UL
    for( var i = 0; i < li_list.length; i++ )
    {
        var node = li_list.item(i);
        if( node )
        {
        // Check to see if the node is a LI
            if( node.nodeName == "LI" )
            {
            // Increment the count of LI nodes
                count++;
            // Check to see if this node is the one passed in
                if( the_li == node )
                {
                    // If so, alert the current count
                    alert(count-1);
                }
            }
        }
    }
}

JavaScript DOM: Find Element Index In Container

13 Answers13

Linked

Related