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.

Answer 1

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>

Answer 2

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).