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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation jQuery iteration

    jQuery newbie question: I am trying to write more efficient code using a for loop to replace these redundant blocks:

    Code:
    $(document).ready(function(){
    							   
      $("#navItem1").mouseover(function(){
    	$("#navItem1 .dropDownPanel").show();
    	$("#navItem1 .tab").css("background-color","#686D73");
    	$("#navItem1").mouseout(function(){
    		$("#navItem1 .dropDownPanel").hide();
    		$("#navItem1 .tab").css("background-color","");
    	  });
      });
      
      $("#navItem2").mouseover(function(){
    	$("#navItem2 .dropDownPanel").show();
    	$("#navItem2 .tab").css("background-color","#686D73");
    	$("#navItem2").mouseout(function(){
    		$("#navItem2 .dropDownPanel").hide();
    		$("#navItem2 .tab").css("background-color","");
    	  });
      });
      
      $("#navItem3").mouseover(function(){
    	$("#navItem3 .dropDownPanel").show();
    	$("#navItem3 .tab").css("background-color","#686D73");
    	$("#navItem3").mouseout(function(){
    		$("#navItem3 .dropDownPanel").hide();
    		$("#navItem3 .tab").css("background-color","");
    	  });
      });
      
    });
    This seemed like an easy task, but the following didn't work:

    Code:
    $(document).ready(function(){
      for (var i=1; i<=3; i++)
      {
        $("#navItem"+i).mouseover(function(){
          $("#navItem"+i+" .dropDownPanel").show();
          $("#navItem"+i+" .tab").css("background-color","#686D73");
          $("navItem"+i).mouseout(function(){
            $("#navItem"+i+" .dropDownPanel").hide();
            $("#navItem"+i+" .tab").css("background-color","");
          });
        });
      }
    });
    Can someone tell me what I'm doing wrong or point me to a solution?

    Thanks!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    not tested but here you go:

    Code:
    $(document).ready(function(){ 
    	$("[id^='navItem']").each(function(index, value) {
    		index=index+1
    	
    		  $(this).bind("mouseover",function(e){
    			  $("#navItem"+index+" .dropDownPanel").show();
    			  $("#navItem"+index+" .tab").css("background-color","#686D73");
    				  
    		  });
    		  $(this).bind("mouseout",function(e){
    				  $("#navItem"+index+" .dropDownPanel").hide();
    				  $("#navItem"+index+" .tab").css("background-color","");
    		  });
    	});
    });
    Last edited by DanInMa; 12-21-2011 at 08:13 PM. Reason: fixed some mistakes

  • Users who have thanked DanInMa for this post:

    dmack333 (12-23-2011)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by DanInMa View Post
    Code:
    …each(function(index, value) {…
    I don’t see value being used so you can just leave it, I guess:
    Code:
    $("[id^='navItem']").each(function(i) {
    	i=i+1
            …

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by DanInMa View Post
    Code:
    $(document).ready(function(){ 
    	$("[id^='navItem']").each(function(index, value) {
    		index=index+1
    	
    		  $(this).bind("mouseover",function(e){
    			  $("#navItem"+index+" .dropDownPanel").show();
    			  $("#navItem"+index+" .tab").css("background-color","#686D73");
    				  
    		  });
    		  $(this).bind("mouseout",function(e){
    				  $("#navItem"+index+" .dropDownPanel").hide();
    				  $("#navItem"+index+" .tab").css("background-color","");
    		  });
    	});
    });
    This still looks a bit messier than it has to be. I'd go with this:

    PHP Code:
    $(function () {
        $(
    '[id^="navItem"]').hover(function() {
            $(
    this).find('.dropDownPanel').show();
            $(
    this).find('.tab').css({backgroundColor'#686D73'});
        }, function () {
            $(
    this).find('.dropDownPanel').hide();
            $(
    this).find('.tab').css({backgroundColor'transparent'});
        });
    }); 

    The best way, of course, would be to get rid of all that jQuery bloat, and just use CSS. If you give those navItems the class "navItem", that's just 4 lines of CSS for the same functionality:

    Code:
    .navItem .dropDownPanel {display: none;}
    .navItem:hover .dropDownPanel {display: block;}
    .navItem .tab {background-color: transparent;}
    .navItem:hover .tab {background-color: #686D73;}
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Perfect!

    Thank you DanInMa, VIPStephan and venegal for your replies.

    I ended up going with DanInMa's solution (with VIPStephan's tweak) because I was able to understand (for the most part) how it functioned.

    While venegal's jQuery solution might be the most efficient, I couldn't wrap my newbie brain around how to get it to work within the context of my project.

    Last question: how does the "^=" operator work, as in:

    Code:
    [id^='navItem']
    Thanks again everyone

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by dmack333 View Post
    While venegal's jQuery solution might be the most efficient, I couldn't wrap my newbie brain around how to get it to work within the context of my project.
    What problems did you run into? That piece of code I posted does the exact same thing DanInMa's does, only a bit less convoluted.

    Also, please consider using the CSS solution instead — it's always better not to use Javascript, if it's possible to do the same thing with CSS.

    Quote Originally Posted by dmack333 View Post
    Last question: how does the "^=" operator work
    See here: http://api.jquery.com/attribute-starts-with-selector/
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback


  •  

    Posting Permissions

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