jquery - 配列を使用するか、Jquery で startwith と文字列を使用してこのコードを単純化する必要がありますか? ルーキー

Question

私は JavaScript/jQuery を使い始めたばかりで、構文がまだ少し圧倒されています。数行のコードを書くのに何時間もかかります。このコードをより賢くするための正しい方向を教えていただけないでしょうか。divの垂直方向の配置を設定するために、以下のようなコードがあります。配列を実行してから反復i++して値を保存してから計算を実行しようとしましたが、それを機能させるための正しい構文を見つけるのに問題がありました。2 つの配列が 5 つの異なる値を同時に計算するのに適した構造であるかどうかさえわかりません。私は試した：

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

その後：

var buttonheight = $this.height

そして、他のdivに対してそれをやろうとしました。明日の朝に再開してもう少し読みますが、誰かがここで少し助けてくれると思いました。私のコードは機能するので必須ではありませんが、適切に行うことを学びたいです。

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+'%'});
}