1

アイテムの配列をループして、それぞれを2つの列の中に入れようとしています。なんとかできましたが、少し違う順番にしたいと思います。

私は自分が達成しようとしていることと私の問題がここにあることを説明しようとしました：http：//jsfiddle.net/yXGA7/9/

[Prepend]リンクをクリックすると、最初の列ボックスに6つの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;
    }
  });  
})

しかし、何をすべきかわからない。

これを手伝ってくれる人はいますか？

UPDATE 残念ながら、Prepend関数を使用する必要があります。「追加」はうまくいくと思いますが、使えないのではないかと思います。

UPDATE 2 jsFiddleを更新して、何をしたいのかを説明しました：http: //jsfiddle.net/yXGA7/9/

4

2 に答える 2

1

prependの代わりに、次のようにappendを使用します。

 $("#col" + colCounter).append(item);
于 2012-10-18T07:49:19.063 に答える
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 に答える