1

I have a for loop that is generating some HTML content:

var boxes = "";

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
}

document.getElementById("id").innerHTML = boxes;

I want to display 3 boxes in one row, then below them 2 boxes in one row, then 1, then 3 again, 2, and 1.

First i thought of using the if statement to check whether i > 2 to add a line break, but it will also add a line break after every box past the third one. Nothing comes to mind, and my basic knowledge of javascript tells me I'll have to make a loop for each row I want to make. Any advice?

Improve this question
1

4 Answers 4

Reset to default
1

You can try something like this:

Idea

  • Keep an array of batch size
  • Loop over array and check if iterator is at par with position
  • If yes, update position and index to fetch next position

var boxes = "";
var intervals = [3, 2, 1];
var position = intervals[0];
var index = 0;
for (i = 0; i < 11; i++) {
  boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
  if ((position-1) === i) {
    boxes += "<br/>";
    index = (index + 1) % intervals.length;
    position += intervals[index]
  }
}

document.getElementById("content").innerHTML = boxes;
.box{
  display: inline-block;
}
<div id="content"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This seems to work best for me. My boxes actually have a float: left property but instead of br i added a div with a clear:both property and everything works fine.
1

I would use a different approch :

Use a array to store the number of item per row :

var array = [3, 2, 1, 3, 2];

Then, using two loops to iterate this

for(var i = 0; i < array.length; i++){
    //Start the row 
    for(var j = 0; j < array[i]; ++j){
        //create the item inline
    }
    //End the row 
}

And you have a pretty system that will be dynamic if you load/update the array.

PS : not write javascript in a while, might be some syntax error

Edit :

To generate an id, this would be simple.

create a variable that will be used as a counter.

var counter = 0;

On each creating of an item, set the id like 

var id = 'boxes_inline_' + counter++;

And add this value to the item you are generating.

Note : This is a small part of the algorithm I used to build a form generator. Of course the array contained much more values (properties). But this gave a really nice solution to build form depending on JSON

Improve this answer

6 Comments

syntax -> array -> [3,2,1,3,2]
no worries, and your solution is clean if op needs limited repetitions. :)
@AxelH Just a pointer, instead of repeating [..., 3,2], use mod operator to repeat the pattern.
@Rajesh Well, I used this solution because, yes the actual pattern could be done with a modulo, but I stayed generic. If the patern become random, this would be simpler to maintain. And the pattern can be build with the modulo if needed ;)
Very elegant solution, however, having different id's for each box this creates boxes with same id's each row. I'm sorry that I didn't include that in my question, but this can come in handy too. Would you mind explaining what array.length does tho?
|
0 
var boxes = "",
    boxesInRow = 3,
    count = 0;

for (i = 0; i < 11; i ++) {
    boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
    count++;
    if(count === boxesInRow) {
       boxes += "<br/>";
       boxesInRow -= 1;
       count = 0;
       if (boxesInRow === 0) {
           boxesInRow = 3;
       }
   }
}

document.getElementById("id").innerHTML = boxes;
Improve this answer

Comments

0 
 var i;
    var boxes = "";
    for (i = 0; i < boxes.length; i++) {
        boxes += "<div class=""><img src=""/></div>";
        function displayboxes() {
        "use strict";
        for (i = 0; i < boxes.length; i++) {
            out.appendChild(document.createTextNode(boxes[i] + "<br>"));
        }
    }
        displayboxes(boxes);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.