CODEWITHSUNDEEP
javascriptdom
timothy
timothy

Reputation:

Finding DOM node index

I want find the index of a given DOM node. It's like the inverse of doing 

document.getElementById('id_of_element').childNodes[K]

I want to instead extract the value of K given that I already have the reference to the child node and the parent node. How do I do this?

Upvotes: 61

Views: 53495

Answers (7)

calipoop
calipoop

Reputation: 832

A modern native approach might include Array.from(e.children).indexOf(theChild)

No IE support, but Edge works: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Upvotes: 3

some
some

Reputation: 49582

A little shorter, expects the element to be in elem, returns k.

for (var k=0,e=elem; e = e.previousSibling; ++k);

After a comment from Justin Dearing I reviewed my answer and added the following:

Or if you prefer "while": 

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

The original question was how to find the index of an existing DOM element. Both of my examples above in this answer expects elem to be an DOM element and that the element still exists in the DOM. They will fail if you give them an null object or an object that don't have previousSibling. A more fool-proof way would be something like this:

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}

If e is null or if previousSibling is missing in one of the objects, k is -1.

Upvotes: 23

Matthew
Matthew

Reputation: 15952

The shortest possible way, without any frameworks, in all versions of Safari, FireFox, Chrome and IE >= 9:

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

Upvotes: 105

Andrew Plummer
Andrew Plummer

Reputation: 1170

As with the original poster, I was trying to

find the index of a given DOM node

but one that I had just use a click handler on, and only in relation to its siblings. I couldn't end up getting the above to work (because of noobness undoubtably, i tried subbing in 'this' for elem but it didn't work).

My solution was to use jquery and use:

var index = $(this).parent().children().index(this);

It works without having to specify the type of the element ie:'h1' or an id etc.

Upvotes: 1

lezardo
lezardo

Reputation: 7

using a framework like prototype you could use this :

$(el).up().childElements().indexOf($(el))

Upvotes: -1

scunliffe
scunliffe

Reputation: 63580

RoBorg's answer works... or you could try...

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);

Upvotes: 4

Greg
Greg

Reputation: 321578

I think the only way to do this is to loop through the parent's children until you find yourself.

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');

Upvotes: 0

Related Questions