如何根据此项目顺序将项目添加到列

我试图通过项目数组来循环，并将它们中的每一个放在几列中。我设法做到了这一点，但我希望命令略有不同。如何根据此项目顺序将项目添加到列

我试图说明什么，我想实现我的问题是什么在这里：http://jsfiddle.net/yXGA7/9/

如果你点击“前面加上”链接，六个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; 
    } 
    }); 
})

但不知道该怎么办。

任何owho想帮助我这个？

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

更新2 我已经更新了的jsfiddle来说明我想发生什么：http://jsfiddle.net/yXGA7/9/

来源

2012-10-18 Evan Foster

我们能否知道为什么需要prepend的上下文？它似乎是一个非常奇怪的约束 – KyorCode

我已经更新了我的jsFiddle来说明为什么我需要使用prepend而不是append。新项目应显示在上方，而不是现有项目下方。 –

不要倒转你的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-18 08:16:17 cbayram

这样做了！非常感谢@cbayram！ –

而不是前插使用追加这样的：

$("#col" + colCounter).append(item);

来源

2012-10-18 07:49:19

不幸的是，我需要使用“前置”功能。 –

独自追加只给你2 3 4 5 @Evan Foster，你为什么需要preprend方法？ – davidkonrad

为什么使用前置函数需要“需要”？追加完全一样，但将其添加到现有内容之后，而不是之前。这就是你需要解决你的问题。 – Flater

如何根据此项目顺序将项目添加到列

回答

相关问题