By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,636 Members | 1,207 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,636 IT Pros & Developers. It's quick & easy.

Looping through a list

P: n/a
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 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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.

Oct 10 '05 #2

P: n/a
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)

Oct 10 '05 #3

P: n/a
Evertjan. wrote in message news:Xn********************@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.
Oct 10 '05 #4

P: n/a
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)

Oct 10 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.