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";
}

前四个孩子的成绩为0。接下来的四个有96个，第三个有四个192，等等。这意味着我们迭代的每四个元素，我们将顶部增加96px。因此楼层（i / 4）（给出0,0,0,0,1,1,1,1,2,2,2,2..etc）* 96。

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

Answer 2

你想循环迭代所有孩子来设置它的style.left和style.top属性

因此您可以为顶部和左侧

创建两个可能值的数组

false

并在循环（for (var i = 0; i < pockets.children.length; i++) { accelerateBallToPocket(cue, pockets.children[i], 60); if (cue.pocketing) break; } // Stumped... for (var i = 0; i < balls.children.length; i++) { // No need for the check here, each ball should have pocketing=false, set at the top of the update loop // This means, that balls.children[i].pocketing will always be false here for (var j = 0; j < pockets.children.length; j++) { accelerateBallToPocket(balls.children[i], pockets.children[j], 60); if (balls.children[i].pocketing) break; // stop checking the rest of the pockets for this ball } }）上将它们分配给适当的孩子使用整数算术运算符商（var topvalues =[0, 96, 192, 288]; var leftvalues = [0, 96, 192, 288];）和模数（for）进行索引

Answer 3

首先要做的事情是：我们需要一个for循环来遍历数组中的每个元素。这将为我们提供一种获取每个元素的索引（想想0, 1, ..., 14, 15）的方法。

for (var i = 0; i < kids.length; i++) {
  // TODO: do something
}

接下来，您说明top第一行为0，第二行为96，依此类推。它看起来每行有4个项目。我们可以使用这种关系对此进行建模。

var row = Math.floor(i / 4); // Divide i by 4 then remove the remainder
var top = row * 96;

这将为前4个0和0，下一个4的1和96，依此类推。接下来，您说left的关系类型与每列相同。我们可以这样建模。

var column = i % 4; // Get the remainder of i / 4
var left = column * 96;

第一列将为您0和0，第二列为1和96，依此类推。最后，我们只需要将它全部包起来并放在上面。

for (var i = 0; i < kids.length; i++) {
  var row = Math.floor(i / 4);
  var top = row * 96;
  var column = i % 4;
  var left = column * 96;

  kids[i].style.top = top + 'px'; // Don't forget to say it's in pixels!
  kids[i].style.left = left + 'px';
}

如何在javascript中循环此模式？

3 个答案: