如何根據此項目順序將項目添加到列

我試圖通過項目數組來循環，並將它們中的每一個放在幾列中。我設法做到了這一點，但我希望命令略有不同。如何根據此項目順序將項目添加到列

我試圖說明什麼，我想實現我的問題是什麼在這裏：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

如何根據此項目順序將項目添加到列

回答

相關問題