Getting next tag in list, nextSibling gives unexpected results

Discussion in 'Javascript' started by Marc, Apr 21, 2006.

  1. Marc

    Marc Guest

    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.
     
    Marc, Apr 21, 2006
    #1
    1. Advertising

  2. Marc

    Ian Collins Guest

    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, Apr 21, 2006
    #2
    1. Advertising

  3. Marc

    Marc Guest

    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 :-(




    "Ian Collins" <> schreef in bericht
    news:...
    > 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, Apr 21, 2006
    #3
  4. Marc

    Marc Guest

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


    "Marc" <> schreef in bericht
    news:17477$44489686$5039c14b$...
    > 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 :-(
    >
    >
    >
    >
    > "Ian Collins" <> schreef in bericht
    > news:...
    > > 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, Apr 21, 2006
    #4
  5. Marc

    Marc Guest

    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" <> schreef in bericht
    news:...
    > 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, Apr 21, 2006
    #5
  6. Marc

    Ian Collins Guest

    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.
     
    Ian Collins, Apr 21, 2006
    #6
  7. 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.
     
    Michael Winter, Apr 21, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    853
    John C. Bollinger
    Jan 27, 2006
  2. Deniz Bahar
    Replies:
    2
    Views:
    484
    Andrey Tarasevich
    Mar 9, 2005
  3. BillKi

    nextSibling doesn't work

    BillKi, May 23, 2005, in forum: Javascript
    Replies:
    12
    Views:
    646
    Thomas 'PointedEars' Lahn
    May 28, 2005
  4. 2obvious

    trouble using .nextSibling

    2obvious, Jul 14, 2005, in forum: Javascript
    Replies:
    5
    Views:
    159
    2obvious
    Jul 14, 2005
  5. Replies:
    4
    Views:
    100
    Terry Reedy
    Jul 25, 2013
Loading...

Share This Page