CODEWITHSUNDEEP
javascriptloopsformatting
TyTilton
TyTilton

Reputation: 17

How can I loop this pattern in javascript?

So I'm kind of new to javascript, basically, I have this pattern for positioning DIVs, I know there has to be a way to loop it, because there is a pattern, but I'm just not used to thinking logically like a programmer yet. Could someone provide some insight on how to go about this?

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

Upvotes: 0

Views: 117

Answers (3)

James
James

Reputation: 22247

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

The first four kids have 0 as their top. The next four have 96, third four 192, etc. So that means for every four elements we iterate, we increase the top by 96px. Hence floor(i/4) (gives 0,0,0,0,1,1,1,1,2,2,2,2..etc) * 96.

For the .left property, we want 0, 96, 192, 288 to repeat. So we take the remainder when we divide i by four, and multiply that by 96.

Upvotes: 1

PA.
PA.

Reputation: 29349

you want a loop to iterate over all the kids to set its style.left and style.top properties

so you create two arrays of the possible values for top and left

var topvalues =[0, 96, 192, 288];
var leftvalues = [0, 96, 192, 288];

and assign them on the loop (for) to the appropiate kid indexing with the integer arithmetic operators quotient (/) and modulo (%)

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

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32511

First things first: we need a for loop to go through each element in your array. This will give us a way of getting the index (think 0, 1, ..., 14, 15) for each element.

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

Next, you state that the top is going to be 0 for the first row, 96 for the second and so forth. It also looks like each row has 4 items. We can model this using this relationship.

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

This will give you 0 and 0 for the first 4, 1 and 96 for the next 4 and so on. Next, you say you have the same kind of relationship for left but for each column. We can model that like this.

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

Which will give you 0 and 0 for the first column, 1 and 96 for the second and so on. Finally, we just need to wrap it all up and put a bow on it.

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

Upvotes: 0

Related Questions