Пользовательский цикл JavaScript

Question

У меня есть этот JS-код, и я хочу упростить его, используя цикл. Максимум цикла будет количеством элементов с именем класса box.

var boxElements = $(".box").length; 

    var char1  = $(".char1"); 
    var char1Center = [ char1.offset().left + char1.width()/2, 
         char1.offset().top + char1.height()/2 
         ]; 
    var char2  = $(".char2"); 
    var char2Center = [ char2.offset().left + char2.width()/2, 
         char2.offset().top + char2.height()/2 
         ]; 
    var char3  = $(".char3"); 
    var char3Center = [ char3.offset().left + char3.width()/2, 
         char3.offset().top + char3.height()/2 
         ]; 
    var char4  = $(".char4"); 
    var char4Center = [ char4.offset().left + char4.width()/2, 
         char4.offset().top + char4.height()/2 
         ]; 
    var char5  = $(".char5"); 
    var char5Center = [ char5.offset().left + char5.width()/2, 
         char5.offset().top + char5.height()/2 
         ]; 
    var char6  = $(".char6"); 
    var char6Center = [ char6.offset().left + char6.width()/2, 
         char6.offset().top + char6.height()/2 
         ]; 

    $(document).mousemove(function(e){  

     var angle1 = Math.atan2(e.pageX- char1Center[0],- (e.pageY- char1Center[1]))*(180/Math.PI);    
     var angle2 = Math.atan2(e.pageX- char2Center[0],- (e.pageY- char2Center[1]))*(180/Math.PI);  
     var angle3 = Math.atan2(e.pageX- char3Center[0],- (e.pageY- char3Center[1]))*(180/Math.PI);  
     var angle4 = Math.atan2(e.pageX- char4Center[0],- (e.pageY- char4Center[1]))*(180/Math.PI);  
     var angle5 = Math.atan2(e.pageX- char5Center[0],- (e.pageY- char5Center[1]))*(180/Math.PI);  
     var angle6 = Math.atan2(e.pageX- char6Center[0],- (e.pageY- char6Center[1]))*(180/Math.PI);  

     char1.css({ "-webkit-transform": "rotate(" + angle1 + "deg)"});  
     char1.css({ "-moz-transform": "rotate(" + angle1 + "deg)"}); 
     char1.css({   "transform": "rotate(" + angle1 + "deg)"}); 

     char2.css({ "-webkit-transform": "rotate(" + angle2 + "deg)"});  
     char2.css({ "-moz-transform": "rotate(" + angle2 + "deg)"}); 
     char2.css({   "transform": "rotate(" + angle2 + "deg)"}); 

     char3.css({ "-webkit-transform": "rotate(" + angle3 + "deg)"});  
     char3.css({ "-moz-transform": "rotate(" + angle3 + "deg)"}); 
     char3.css({   "transform": "rotate(" + angle3 + "deg)"}); 

     char4.css({ "-webkit-transform": "rotate(" + angle4 + "deg)"});  
     char4.css({ "-moz-transform": "rotate(" + angle4 + "deg)"}); 
     char4.css({   "transform": "rotate(" + angle4 + "deg)"}); 

     char5.css({ "-webkit-transform": "rotate(" + angle5 + "deg)"});  
     char5.css({ "-moz-transform": "rotate(" + angle5 + "deg)"}); 
     char5.css({   "transform": "rotate(" + angle5 + "deg)"}); 

     char6.css({ "-webkit-transform": "rotate(" + angle6 + "deg)"});  
     char6.css({ "-moz-transform": "rotate(" + angle6 + "deg)"}); 
     char6.css({   "transform": "rotate(" + angle6 + "deg)"});  

    }); 

Answer 1

Использование each JQuery функция

$('.box').each(function(index) { 
    //index starts at 0  
    var char = $(this); 
    var charCenter = [char.offset().left + char.width()/2, char.offset().top + char.height()/2] 
}); 

Приведенный выше код не проверяется.