getting index to parentNode's childNodes array given an element id

yawnmoth · Jun 24, 2006

Given an element ID, is there a way to figure out what index one would
need to use in the parentNode's childNodes array to get at that
element?

For example...

<body>
<div id="parent">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>

<script type="text/javascript">

alert(document.getElementById('a').parentNode.childNodes[0].innerHTML);
</script>
</body>

The index that IE uses (0) isn't the same as the index that Firefox
uses (1). How could I find this out given an element ID?

As for why I'm asking... I'm writting a script some of whose elements
are not going to be in any predictable order. I'd like to give each of
these elements their own unique ID and then figure out each of their
indexes to their collective parents (they all have the same parent)
childNodes array. This will allow the HTML to be aware of the order of
these elements even though the server side script, itself, isn't.

The above script doesn't really seem relevant, at first, to this
problem, but if I can solve the problem in the above script, I think I
should be able to solve the problem in the actual script I'm working
on.

Anyway, any ideas would be appreciated - thanks!

Laurent Bugnion · Jun 24, 2006

Hi,

Given an element ID, is there a way to figure out what index one would
need to use in the parentNode's childNodes array to get at that
element?

For example...

<body>
<div id="parent">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>

<script type="text/javascript">

alert(document.getElementById('a').parentNode.childNodes[0].innerHTML);
</script>
</body>

The index that IE uses (0) isn't the same as the index that Firefox
uses (1). How could I find this out given an element ID?

Actually, IE and Firefox use the same indexing system, but the
difference is that FF counts carriage returns in the HTML document as a
valid text node, when IE doesn't. IMHO, and referring to XML, I think
that IE is right and FF wrong.

About your question, short of writing a function looping through all
childnodes and comparing to the current element, I don't know any
property allowing to find this.

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

and

var el = document.getElementById('a');
var indexOfEl = getIndex( el );
alert( el.parentNode.childNodes[ indexOfEl ].innerHTML );

Untested, but it should work.

HTH,
Laurent

As for why I'm asking... I'm writting a script some of whose elements
are not going to be in any predictable order. I'd like to give each of
these elements their own unique ID and then figure out each of their
indexes to their collective parents (they all have the same parent)
childNodes array. This will allow the HTML to be aware of the order of
these elements even though the server side script, itself, isn't.

I can think of a few ways to create the information on the server, and
then pass it to the client-side script. But then, maybe I didn't
understand wat you try to achieve.

[snip]

HTH,
Laurent

I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Trying to return true if a sub array exists at given index	1	Mar 4, 2021
How to fetch and console.log all items from an associative array	3	Apr 17, 2024
Accessing array index addresses with custom datatype in a function	0	Jun 2, 2022
Program to find the largest integer element of an array.	1	Mar 2, 2022
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
I keep getting this error when im trying to show category name.	0	Dec 26, 2023
Update element value ViewWeb2 .net Control	1	Oct 7, 2022

getting index to parentNode's childNodes array given an element id

yawnmoth

Laurent Bugnion

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads