Results 1 to 3 of 3

Thread: javascript loop skipping intervals, why?

  1. #1
    Join Date
    May 2007
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default javascript loop skipping intervals, why?

    i know there are pre-made scripts to do what i'm doing, in fact i think dd offers one. i want to create this myself to learn.

    i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me.

    my js -
    Code:
    function expandAll() {
    	var collapsedDivs = document.getElementsByClassName('collapsed');
    	for (var i=0; i<collapsedDivs.length; i++) {
    		var expandMe = collapsedDivs[i];
    		expandMe.style.display = 'block';
    		expandMe.addClassName('expanded');
    		expandMe.removeClassName('collapsed');
    		document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />';
    	}
    }
    my html -
    Code:
    <div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div>
    <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div>
    <div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div>
    <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div>
    <div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div>
    <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div>
    <div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div>
    <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div>
    upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    collapsedDivs is not a true array, it is a nodelist. As you loop through it, you are also removing nodes from it, changing both its length property and the indexes (their 'i' in this case) of the remaining members.

    I've often found that in situations like this, one can loop backward through the list:
    Code:
    for (var i = collapsedDivs.length - 1; i > -1; --i) {
    I'm not sure if this will work here. If not, one must turn the nodelist into a true array before processing:

    Code:
    for (var collapsedDivs = [], i = document.getElementsByClassName('collapsed').length - 1; i > -1; --i){
    collapsedDivs[i] = document.getElementsByClassName('collapsed')[i];
    }
    	for ( i=0; i<collapsedDivs.length; i++) {
    		var expandMe = collapsedDivs[i];
    		expandMe.style.display = 'block';
    		expandMe.addCl . . .
    Note: A similar issue arises when looping through an array while also removing elements from that array.
    Last edited by jscheuer1; 10-01-2009 at 06:57 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ahs10 (10-01-2009)

  4. #3
    Join Date
    May 2007
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thank you very much! not only a great suggestion on how to repair it, but the correcting my definition of collapsedDivs as a node list instead of an array, is just priceless.

    i'm going to go correct a few definitions out in the www of what getElementsByClassName really does. you rock! cheers!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •