Question

I’m trying to loop thru an array of items and put each of them inside a couple of columns. I’ve managed to do this, but I would like order to be slightly different.

I’ve tried to illustrate what I’m trying to achieve and what my problem is here: http://jsfiddle.net/yXGA7/9/

If you click the “Prepend” link, six divs will appear in the first column box. But, the order is not what I’m looking it to be. I would like it to be read (from top left):

5 4 3 2
1 0

and not:

1 0 3 2
5 4

I’m aware of that something needs to done here:

colCounter = 1;
cols = 4;

$("#prepend").click(function(){
  $.each(makeDivs(), function (index, value) {
    var item = $(value);
    $("#col" + colCounter).prepend(item);
    colCounter++;
    if(colCounter > cols) {
      colCounter = 1;
    }
  });  
})

But not sure what to do.

Anyone owho would like to help me out with this?

UPDATE
Unfortunately, I need to use the Prepend function. I believe “Append” would work, but cannot use that, I’m afraid.

UPDATE 2
I’ve updated the jsFiddle to illustrate what I would like to happen: http://jsfiddle.net/yXGA7/9/

Answer 1

Do not reverse your makeDivs array and start at colCounter at 2 to working your ways backwards:

$(document).ready(function() {
    var ds = makeDivs();
    var colCount = 4; 
    var colCounter = ds.length % colCount;  // simply assign to 2 if you don't want to make it dynamic
    // push out the items to the columns

    $("#prepend").click(function(){
      $.each(ds , function (index, value) {
        var item = $(value);
        $("#col" + colCounter).prepend(item);
        colCounter--;  // go backwards
        if(colCounter < 1) {  
          colCounter = colCount; //reset to 4
        }
      });  
    })
});
function makeDivs() {
   var divs = new Array();   
   for(var i=0;i<6;i++){
      div = $('<div></div>').addClass('item');
      p = "<p>"+i+"</p>";
      div.append(p);
      divs.push(div);
    }

  return divs; // don't reverse
}

Be careful with global variable declarations with i, colCounter, etc.