javascript - 我怎样才能在javascript中循环这个模式？

Question

所以我对 javascript 有点陌生，基本上，我有这种定位 DIV 的模式，我知道必须有一种方法来循环它，因为有一种模式，但我只是不习惯思考逻辑上还像个程序员。有人可以提供一些关于如何解决这个问题的见解吗？

        kids[0].style.top = "0px";
        kids[0].style.left = "0px";
        kids[1].style.top = "0px";
        kids[1].style.left = "96px";
        kids[2].style.top = "0px";
        kids[2].style.left = "192px";
        kids[3].style.top = "0px";
        kids[3].style.left = "288px";

        kids[4].style.top = "96px";
        kids[4].style.left = "0px";
        kids[5].style.top = "96px";
        kids[5].style.left = "96px";
        kids[6].style.top = "96px";
        kids[6].style.left = "192px";
        kids[7].style.top = "96px";
        kids[7].style.left = "288px";

        kids[8].style.top = "192px";
        kids[8].style.left = "0px";
        kids[9].style.top = "192px";
        kids[9].style.left = "96px";
        kids[10].style.top = "192px";
        kids[10].style.left = "192px";
        kids[11].style.top = "192px";
        kids[11].style.left = "288px";

        kids[12].style.top = "288px";
        kids[12].style.left = "0px";
        kids[13].style.top = "288px";
        kids[13].style.left = "96px";
        kids[14].style.top = "288px";
        kids[14].style.left = "192px";
        kids[15].style.top = "288px";
        kids[15].style.left = "288px";

Answer 1

var kids = [some array/arraylike of elements]

for (var i=0; i < kids.length; i++) {
  kids[i].style.top = 96 * Math.floor(i/4) + "px";
  kids[i].style.left = 96 * (i % 4) + "px";
}

前四个 child 的最高成绩是 0。接下来的四个有 96，第三个四个有 192，等等。这意味着我们每迭代四个元素，我们就会将顶部增加 96px。因此，floor(i/4)(给出 0,0,0,0,1,1,1,1,2,2,2,2..etc)* 96。

对于 .left 属性，我们希望重复 0、96、192、288。因此，我们取 i 除以 4 的余数，然后乘以 96。