jquery - Putting an .each() loop inside a for loop?

Question

Subject: Roller derby. I have 8 teams, each team has 4 players. I am going to display the teams on a page in a grid. 8 teams across by 4 players down. When you roll over any player all the players on the same team light up.

It will look like this...

X X X X X X X X
X X X X X X X X
X X X X X X X X
X X X X X X X X

Each player is a div and each team gets a class ("team1" "team2" "team3" ....). How can I loop through each team and nested loop each player to add a function to change the team class attribute?

This is what I currently have (this works, but only for "team1")...

$(document).ready(function() {
        $('.team1').mouseenter(function(){
            $('.team1').css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team1').mouseleave(function(){
            $('.team1').css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
});

I could hard code each team but what if I had 100 teams? This is what I am shooting for (currently not working)...

$(document).ready(function() {
    for (var t=0;t<9;t++){
        $('.team'+t).mouseenter(function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team'+t).mouseleave(function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
    }
});

Thanks in advance.

I see no `.each()` in your code, possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Musa, Oct 03 '12 at 02:50
I apologize if this has been asked before. I can't seem to find a solution that helps me understand this. I can't see how the example you posted would work for me either. I have updated my question and code above. The first piece works fine while the team class name is hard coded (ie "team1" vs "team"+x) but when I try and bring it dynamic by adding a variable to the class it no longer works. — Think Floyd, Oct 03 '12 at 03:28

score 0 · Accepted Answer · answered Oct 03 '12 at 03:54

The problem is the value of t when the function is executed is not the same at the time the anonymous functions in the mouseenter/leave handlers were defined.

see http://www.javascriptkit.com/javatutors/closures.shtml

$(document).ready(function() {
    function me(t){
        return function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        }
    }
    function ml(t){
        return function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        }
    }
    for (var t=0;t<20;t++){
        $('.team'+t).mouseenter(me(t));     
        $('.team'+t).mouseleave(ml(t));
    }
});

Thank you so much. I have had similar situations in the past so I understand your explanation of the problem. I don't understand how your solution works quite yet but it DOES work like a charm. To bed now to sleep and understanding will come with fresh eyes. Again Thanks a LOT! — Think Floyd, Oct 03 '12 at 04:04

jquery - Putting an .each() loop inside a for loop?

1 Answers1