Should I use an array or just simplify this code with startwith and strings in Jquery? Rookie

Question

I am just starting with JavaScript/jQuery and I find the syntax still a bit overwhelming. It takes hours to write a few lines of code. I was wondering if you could point me to the right direction to make this code more clever. I have a code like the one below to set the vertical alignment of a div. I tried doing an array then iterate i++ to store the values and then do the math but I had problems finding the right syntax to make it work. I am not even sure if two arrays is a good structure to calculate simultaneously 5 different values. I tried:

$('[id^=#tr1]').css({top : ratio+'%'});

and then:

var buttonheight = $this.height

and then I tried to do it for the other div. I will resume tomorrow morning and read a bit more but I thought that someone could give me a bit of help here. It is not essential since my code works but I want to learn doing things properly.

function setAbsolutePosition()
{ 
    var button1height= $("#buttonbg1").height();
    var button2height= $("#buttonbg2").height();
    var button3height= $("#buttonbg3").height();
    var button4height= $("#buttonbg4").height();
    var button5height= $("#buttonbg5").height();
    var text1height=$("#tr1").height();
    var text2height=$("#tr2").height();
    var text3height=$("#tr3").height();
    var text4height=$("#tr4").height();
    var text5height=$("#tr5").height();
    var ratio1 = 50-((text1height-1)/button1height/2*100);
    var ratio2 = 50-((text2height-1)/button2height/2*100);
    var ratio3 = 50-((text3height-1)/button3height/2*100);
    var ratio4 = 50-((text4height-1)/button4height/2*100);
    var ratio5 = 50-((text5height-1)/button5height/2*100);
    $("#tr1").css({top : ratio1+'%'});
    $("#tr2").css({top : ratio2+'%'});
    $("#tr3").css({top : ratio3+'%'});
    $("#tr4").css({top : ratio4+'%'});
    $("#tr5").css({top : ratio5+'%'});
}

Answer 1

Whenever something appears too repetitive, it normally is.. consider:

for (var i = 1; i <= 5; i++ ) { // i in [1,5]
    var buttonNeight = $("#buttonbg" + i).height();
    var textHeight = $("#tr" + i).height();
    var ratio = 50-((textHeight-1)/buttonHeight/2*100);
    $("#tr" + i).css({top : ratio+'%'});
}

Note that in this case there is no need to use an array because all the values are a direct function of i.

Also, I haven't actually looked at what this is trying to accomplish, so there might be a good/accepted way to achieve the same goals in pure CSS without using JavaScript.

Answer 2

 function setAbsolutePosition(){ 

        for (var I =1; I <=5; I++){
               var buttonheight= $("#buttonbg" + I).height();
               var textheight=$("#tr" + I).height();
               var ratio = 50-((textheight-1)/buttonheight/2*100);

               $("#tr" + I).css({top : ratio+'%'});
    }

I Think this is what you are looking for. Because jquery uses strings for looking up the items you can dynamically change them at each iteration of tge loop.

Please forgive the poor formatting as I'm on my phone.