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

Y

yawnmoth

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!
 
L

Laurent Bugnion

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top