title: jquery - Putting an .each() loop inside a for loop?
body: <p>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. </p>
  
  <p>It will look like this...</p>
  
  <p>X X X X X X X X<br>
  X X X X X X X X<br>
  X X X X X X X X<br>
  X X X X X X X X<br></p>
  
  <p>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?</p>
  
  <p>This is what I currently have (this works, but only for "team1")...</p>
  
  <pre><code>$(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');
          });
  });
  </code></pre>
  
  <p>I could hard code each team but what if I had 100 teams? This is what I am shooting for (currently not working)...</p>
  
  <pre><code>$(document).ready(function() {
      for (var t=0;t&lt;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');
          });
      }
  });
  </code></pre>
  
  <p>Thanks in advance.</p>