1

我正在尝试遍历一组项目并将它们中的每一个放在几列中。我已经设法做到这一点，但我希望订单略有不同。

我试图说明我想要实现的目标以及我的问题在这里：http: //jsfiddle.net/yXGA7/9/

如果单击“Prepend”链接，第一个列框中将出现六个 div。但是，顺序不是我想要的。我希望它被阅读（从左上角开始）：

5 4 3 2
1 0

并不是：

1 0 3 2
5 4

我知道这里需要做一些事情：

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

但不确定该怎么做。

有人愿意帮我解决这个问题吗？

更新 不幸的是，我需要使用 Prepend 函数。我相信“附加”会起作用，但恐怕不能使用它。

更新 2 我更新了 jsFiddle 来说明我想要发生的事情：http: //jsfiddle.net/yXGA7/9/

4

2 回答 2

1

不要反转您的 makeDivs 数组并从 colCounter 2 开始以向后工作：

$(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
}

小心使用 i、colCounter 等进行全局变量声明。

于 2012-10-18T08:16:17.810 回答
1

而不是像这样预先使用附加：

 $("#col" + colCounter).append(item);
于 2012-10-18T07:49:19.063 回答