Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    jQuery for loop with hover function

    I'm trying to loop through my doc and alter the display of 5 containers on hover.

    I can run my hover functions with no problem
    Code:
    $(document).ready(function() { 
    
        myDivs = '5';
        $('li').hover(
    
            function() {
                $('#div_1').addClass("hover");
    		alert(myDivs);
            }, 
    
            function() {
    
                $('#div_1').removeClass("hover");
    
            }
    
        );
    	
    });
    I can establish my for loop with no problem
    Code:
    $(document).ready(function() { 
        myDivs = '5';
        for(z=1;z<=myDivs;z++){
              alert(z);
        };
    });
    But when I attempt to combine - I get some odd behavior - I'm sure it's my syntax but I'm not sure exactly what it is.
    Code:
    $(document).ready(function() { 
    	myDivs = '5';
    	for(z=1;z<=myDivs;z++){
    		alert('#div_'+ z);      // here z increments
    		$('li').hover(
    			function() {
    				$('#div_'+ z).addClass("hover");
    				alert('#div_'+ z);     // here z equal to 6 all the time ???
    			}, 
    			function() {
    				$('#div_'+ z).removeClass("hover");
    			}
    		);
    	}
    });
    any advice would be much appreciated.

    Thanks
    Last edited by hothousegraphix; 01-21-2009 at 03:42 AM.

  • #2
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    not sure if I'm making progress but it looks like I need to declare a variable within the for loop to represent my counter; like
    Code:
    $(document).ready(function() { 
        myDivs = '5';
        for(z=1;z<=myDivs;z++){
            count = z; // new counter variable
            alert('#div_'+ count&#41;; // variable increments
            $('li'&#41;.hover(
                function() {
                    alert('#div_'+ count&#41;; // variable now equal to 5 for every iteration ???
                    $('#div_'+ count&#41;.addClass("hover");
                }, 
                function() {
                    $('#div_'+ count).removeClass("hover");
                }
            );
        }
    });
    I'm still a bit lost as to why may variable is not increasing in value with "z".

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Can you post how your html is structured? Thanks

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    exact same problem! javascript for loop problem with jquery

    Code:

    Javascript:
    Code:
     for (k = 1; k <= 2; k++) {
    
            readMoreStr = "#readMore" + k;
    
            $(readMoreStr).click(function() {
                alert("Read more id: " + readMoreStr);
                // ALWAYS ALERTS "Read more id: 2" on both readmore divs when clicked
            });
        }
    HTML:

    Code:
    <div class="readMore"  id="readMore1">
            <a href="" title="read more" class="readMoreLink">read more</a>
          </div>
    <div class="readMore"  id="readMore2">
            <a href="" title="read more" class="readMoreLink">read more</a>
          </div>


    any ideas guys?
    thx
    Last edited by podpi; 11-26-2009 at 05:56 PM.


  •  

    Posting Permissions

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