Getting next tag in list, nextSibling gives unexpected results

[Marc]

This is probably a no brainer for the most of you but my head is spinning at
the moment.

Considering the following list how do I get a reference to the ul just below
the li with id products? nextSibling gives me a reference to the #text# node
inside the li tag?

<ul>
<li id="products">products</li>
<ul>
<li id="child">child</li>
<li id="chair">chair</li>
</ul>
</ul>

I want to create several functions to add or remove items from the list.

[Ian Collins]

Marc wrote:

This is probably a no brainer for the most of you but my head is spinning at
the moment.

Considering the following list how do I get a reference to the ul just below
the li with id products? nextSibling gives me a reference to the #text# node
inside the li tag?
You could just use a while loop and call nextSibling until the nodeName
== 'ul'.

<ul>
<li id="products">products</li>
<ul>
<li id="child">child</li>
<li id="chair">chair</li>
</ul>
</ul>

--
Ian Collins.

[Marc]

Hi Ian,

Thanks for the quick response!

I tried doing that but I must be doing something utterly stupid:

var listItem = document.getElementById("products");
var col = listItem.childNodes;
var tmp = "";
for (var i=0;i<col.length; i++){
tmp += col[i].nodeName + "\n";
}
alert(tmp);

all I'm getting is #text#... nothing else :-(


"Ian Collins" <ia******@hotmail.com> schreef in bericht
news:4a*************@individual.net...

Marc wrote:

This is probably a no brainer for the most of you but my head is spinning at the moment.

Considering the following list how do I get a reference to the ul just below the li with id products? nextSibling gives me a reference to the #text# node inside the li tag?

You could just use a while loop and call nextSibling until the nodeName
== 'ul'.

<ul>
<li id="products">products</li>
<ul>
<li id="child">child</li>
<li id="chair">chair</li>
</ul>
</ul>

--
Ian Collins.

[Marc]

uhm... no I didn't try nextSibling...
I tried childNodes... :-/
"Marc" <so******@spam.com> schreef in bericht
news:17**************************@news.chello.nl.. .

Hi Ian,

Thanks for the quick response!

I tried doing that but I must be doing something utterly stupid:

var listItem = document.getElementById("products");
var col = listItem.childNodes;
var tmp = "";
for (var i=0;i<col.length; i++){
tmp += col[i].nodeName + "\n";
}
alert(tmp);

all I'm getting is #text#... nothing else :-(


"Ian Collins" <ia******@hotmail.com> schreef in bericht
news:4a*************@individual.net...

Marc wrote:

This is probably a no brainer for the most of you but my head is spinning at the moment.

Considering the following list how do I get a reference to the ul just below the li with id products? nextSibling gives me a reference to the

#text#

node inside the li tag?

You could just use a while loop and call nextSibling until the nodeName
== 'ul'.

<ul>
<li id="products">products</li>
<ul>
<li id="child">child</li>
<li id="chair">chair</li>
</ul>
</ul>

--
Ian Collins.

[Marc]

okay... got it... pfff...

var el = document.getElementById("products").nextSibling;
while (el) {
tmp += el.nodeName + "\n";
el = el.nextSibling;
}
alert(tmp);
need more coffee I gues... thanks for pointing me in the right direction!!!
"Ian Collins" <ia******@hotmail.com> schreef in bericht
news:4a*************@individual.net...

Marc wrote:

This is probably a no brainer for the most of you but my head is spinning at the moment.

Considering the following list how do I get a reference to the ul just below the li with id products? nextSibling gives me a reference to the #text# node inside the li tag?

You could just use a while loop and call nextSibling until the nodeName
== 'ul'.

<ul>
<li id="products">products</li>
<ul>
<li id="child">child</li>
<li id="chair">chair</li>
</ul>
</ul>

--
Ian Collins.

[Ian Collins]

Marc wrote:

okay... got it... pfff...

var el = document.getElementById("products").nextSibling;
while (el) {
tmp += el.nodeName + "\n";
el = el.nextSibling;
}
alert(tmp);
need more coffee I gues... thanks for pointing me in the right direction!!!

Please don't top post, it's not considered good form.

It was one of many directions!

--
Ian Collins.

[Michael Winter]

On 21/04/2006 09:09, Marc wrote:

Considering the following list how do I get a reference to the ul just below
the li with id products? [...]

<ul>
<li id="products">products</li>
<ul>

With potential difficulty. The markup is invalid, so how a browser
constructs the document tree is entirely dependant upon its error
correction mechanism. Any of the following are feasible results:

- <ul>
<li id="products">products
<ul> <!-- This is what the markup
should look like.
-->

- <ul>
<li id="products">products</li>
</ul>
<ul>

- <ul>
<li id="products">products</li>
<li> <!-- This would be a new list item. -->
<ul>

- <ul>
<li id="products">products</li>
<li id="child">child
<ul>

A browser might even tolerate the invalid markup, as-is. In any case,
one cannot hope for predictable behaviour with something that is
fundamentally broken. Fix the markup then - as has already been
suggested - use a loop (with the children [childNodes] of the 'products'
list item, in this case) until a list element is encountered.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.