Looping through a list

Discussion in 'Javascript' started by simon_s_li@hotmail.com, Oct 10, 2005.

  1. Guest

    Hi,

    I have a list (i..e <UL> <LI>) where each <LI> contains a <DIV> and
    text in it.

    Example:

    <UL>
    <LI>
    <DIV> text here 1</DIV>
    </LI>
    <LI>
    <DIV> text here 2</DIV>
    </LI>
    <LI>
    <DIV> text here 3</DIV>
    </LI>
    <UL>

    Using javascript how do I read the content of each item in the list.

    Regards
    Simon
     
    , Oct 10, 2005
    #1
    1. Advertising

  2. Baconbutty Guest

    1. You will need to get a reference to the UL element. You could give
    it an "id" and use document.getElementById.

    2. You will need to teach yourself about the DOM (document object
    model) for HTML. The object returned by "getElementById" will be an
    Element object, which exposes DOM properties and methods, e.g.
    "childNodes", "firstChild", "data" etc. Use these to find the Text
    nodes of the DIV elements, and read their content.
     
    Baconbutty, Oct 10, 2005
    #2
    1. Advertising

  3. Evertjan. Guest

    wrote on 10 okt 2005 in comp.lang.javascript:

    > I have a list (i..e <UL> <LI>) where each <LI> contains a <DIV> and
    > text in it.
    >
    > Example:
    >
    > <UL>
    > <LI>
    > <DIV> text here 1</DIV>
    > </LI>
    > <LI>
    > <DIV> text here 2</DIV>
    > </LI>
    > <LI>
    > <DIV> text here 3</DIV>
    > </LI>
    > <UL>


    </UL> !!!!

    >
    > Using javascript how do I read the content of each item in the list.


    Many ways, here an example:

    <UL id=ulx>
    <LI>
    <DIV> text here 1</DIV>
    </LI>
    <LI>
    <DIV> text here 2</DIV>
    </LI>
    <LI>
    <DIV> text here 3</DIV>
    </LI>
    </UL>

    <script type='text/javascript'>

    var ulx = document.getElementById('ulx')

    f = ulx.firstChild
    t = f.innerHTML
    alert(t)
    t = f.firstChild.innerHTML
    alert(t)

    f = f.nextSibling
    t = f.innerHTML
    alert(t)
    t = f.firstChild.innerHTML
    alert(t)

    f = f.nextSibling
    t = f.innerHTML
    alert(t)
    t = f.firstChild.innerHTML
    alert(t)

    </script>




    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
     
    Evertjan., Oct 10, 2005
    #3
  4. Robi Guest

    Evertjan. wrote in message news:Xns96EBA9FA231B0eejj99@194.109.133.242...
    > wrote on 10 okt 2005 in comp.lang.javascript:
    >
    >> I have a list (i..e <UL> <LI>) where each <LI> contains a <DIV> and
    >> text in it.

    [...]
    >> Using javascript how do I read the content of each item in the list.

    >
    > Many ways, here an example:
    >
    > <UL id=ulx>
    > <LI>
    > <DIV> text here 1</DIV>
    > </LI>
    > <LI>
    > <DIV> text here 2</DIV>
    > </LI>
    > <LI>
    > <DIV> text here 3</DIV>
    > </LI>
    > </UL>
    >
    > <script type='text/javascript'>
    >
    > var ulx = document.getElementById('ulx')
    >
    > f = ulx.firstChild
    > t = f.innerHTML
    > alert(t)
    > t = f.firstChild.innerHTML
    > alert(t)
    >
    > f = f.nextSibling
    > t = f.innerHTML
    > alert(t)
    > t = f.firstChild.innerHTML
    > alert(t)
    >
    > f = f.nextSibling
    > t = f.innerHTML
    > alert(t)
    > t = f.firstChild.innerHTML
    > alert(t)
    >
    > </script>


    different browsers tend to react differently to white spaces between tags
    <ul>
    <li>
    <div>text</div>
    </li>
    </ul>
    in Firefox for instance, will end up as
    --+-- <ul> ELEMENT_NODE
    | +-- TEXT_NODE
    | +-+-- <li> ELEMENT_NODE
    | | +-- TEXT_NODE
    | | +-+-- <div>- ELEMENT_NODE
    | | | --- "text" TEXT_NODE
    | | --- TEXT_NODE
    | --- TEXT_NODE
    --- TEXT_NODE

    Why do I mention this?
    because you need to find the nodes that get to the text you want.

    Evertjan showed you a simple way to access the text.
    although if you don't write
    <ul><li><div>text 1</div></li><li><div>text 2</div></li></ul>
    you're going to end up with errors in Firefox.

    you can access the UL or if you have more than one UL
    with getElementsByTagName()

    I modified Evertjan's script a bit to /loop/ through all ULs
    and the LIs.
    What I did not do is loop through nested lists.
    (other than that they would just add up to the number of ULs)

    I'm afraid there are other issues which hopefully will be pointed out
    by someone who knows more about nuances and pitfalls of JavaScript

    <script type="text/javascript">
    var uls = document.getElementsByTagName("ul");
    alert("how many ULs? " + uls.length);
    var ulx, l, c, t;

    for (var ulxs=0; ulxs<uls.length; ulxs++){
    ulx = uls[ulxs];
    for (var lis=0; lis<ulx.childNodes.length; lis++){
    l=ulx.childNodes[lis];
    if (l.nodeType==1) {
    c=l.innerHTML;
    if (!!l.textContent) t=l.textContent;
    else if (!!l.firstChild.innerHTML) t=l.firstChild.innerHTML;
    alert("the content is:\n" + c + "\nor as text\n" + t)
    }
    }
    }
    </script>

    The above script would probably be better if implemented as a function()
    and then called when needed.
     
    Robi, Oct 10, 2005
    #4
  5. Evertjan. Guest

    Robi wrote on 10 okt 2005 in comp.lang.javascript:

    > Evertjan showed you a simple way to access the text.
    > although if you don't write
    > <ul><li><div>text 1</div></li><li><div>text 2</div></li></ul>
    > you're going to end up with errors in Firefox.
    >


    That is why it seems far better to give all the <div>s a seperate id.

    <ul><li>
    <div id='t1'>text 1</div></li>
    <li>
    <div id='t2'>text 2</div></li></ul>

    These can be easily be looped through [without evil eval()]:

    for (i=1;i<3;i++)
    alert(document.getElementById('t'+i).innerHTML)


    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
     
    Evertjan., Oct 10, 2005
    #5
    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. saoirse_79

    looping through a list of lists.

    saoirse_79, Oct 8, 2003, in forum: Python
    Replies:
    0
    Views:
    261
    saoirse_79
    Oct 8, 2003
  2. Rob Hunter

    Re: looping through a list of lists.

    Rob Hunter, Oct 8, 2003, in forum: Python
    Replies:
    2
    Views:
    316
    anton muhin
    Oct 8, 2003
  3. Andy
    Replies:
    3
    Views:
    499
    James Kanze
    Jun 8, 2007
  4. Aaron
    Replies:
    2
    Views:
    577
    dhtml
    Apr 10, 2011
  5. Replies:
    5
    Views:
    304
Loading...

Share This Page