0

次のようなコードがあります。

<div class="items">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

最終結果が次のようになる3列の後に行を追加したい：

<div class="items">
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
   </div>
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
   </div>
   <div class="row">
      <div class="col"></div>
      <div class="col"></div>
   </div>
</div>

jQueryを使用してこれを行う必要があります。列の数は一定ではありません。助けてください

4

2 に答える 2

2

「列の数が一定ではない」と仮定すると、各行にいくつの列が必要かではなく、合計金額を参照しています。

以下は、行に最大 3 つの列があることを前提としています。

$(function(){

    $(".col").each(function(i,v){
        var $row;
        if ((i % 3) == 0){
           $row = $("<div/>");
            $row.addClass("row");
            $(".items").append($row);
        }
        else
        {
            $row = $(".items .row:last");   
        }
        $row.append($(this));
    });

});

--- ライブデモを見る ---

于 2013-08-22T15:52:36.143 に答える
0

あなたは見てみるべき$('selector').each()です

http://api.jquery.com/each/

この関数を使用すると、items-div を反復処理できます。

擬似コード:

$('.items .col').each(function(index) {

  // index is a counter helping you

  // $(this) is the element at the current index

  // the rest is just logical thinking

});
于 2013-08-22T15:55:39.713 に答える