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]

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'.

 

[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.nodeName + "\n";
}
alert(tmp);

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

 

[Marc]

uhm... no I didn't try nextSibling...
I tried childNodes... :-/

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.nodeName + "\n";
}
alert(tmp);

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




#text#

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

 

[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]

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!

 

[Michael Winter]

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