Custom JavaScript loop

Question

I’ve got this JS code and like to simplify it by using a loop. The maximum of the loop will be the amount of elements with the class name 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)"});    

    });

Amal Hashim · Accepted Answer · 2014-10-25 23:54:12Z

3

Use each jQuery function

$('.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]
});

The above code is not tested.

edited Oct 25, 2014 at 23:54

answered Oct 25, 2014 at 23:46

Amal Hashim

5114 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2864740 Over a year ago

Nit: each .charN is technically not constrained to being a descendant (or also be a) .box with the current code, although this is most likely the intent.

user1706680 Over a year ago

Thank you for the answer! I’m a JS newby so it would be great if you could extend your code with an example.

Collectives™ on Stack Overflow

Custom JavaScript loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related