JavaScript DOM: Find Element Index In Container

dom, html, javascript, parent-child

Solution

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>

Problem

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.

Original source

Related problems