jquery - 要素をグループでラップする

Question

私は次のような要素のセットを持っています:

<div class="cols">
 <div class="col">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box fs"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box fs"></div>
  <div class="box"></div>
 </div>
</div>

次のように要素をグループ化したいと思います。

 <div class="col">
  <div class="g">
   <div class="box"></div>
   <div class="box"></div>
  </div>
  <div class="g">
   <div class="box fs"></div>
  </div>
  <div class="g">
   <div class="box"></div>
   <div class="box"></div>
  </div>
  <div class="g">
   <div class="box fs"></div>
  </div>
  <div class="g">
   <div class="box"></div>
  </div>
 </div>
</div>

私はの線に沿って何かを試しています

$('div.cols div.col div.box').nextUntil('.box.fs').andSelf().wrapAll('<div class="g" />');

しかし、それは全体を包み込んでいるだけです。実際には、インデックス 0 から開始し、次に .box.fs に到達するまで、その前のすべてをラップする必要があります。それをコードに伝える方法がわかりません。多分他の誰かが知っていますか？

理由: デスクトップおよびモバイル デバイスで使用するスタイルシートのマルチ/シングル カラム レイアウトを作成しようとしています。

Answer 1

var start = 0;
var boxes = $(".cols .col .box");
while(start < boxes.size()) {
  var box = boxes.eq(start);
  var group =  box.hasClass('fs') ? box : box.nextUntil(".fs").andSelf();
  group.wrapAll("<div class='g'>");
  start += group.size();
}

Answer 2

公正な警告: これは、醜い質問に対する醜い回答です (悪気はありません)。

ここにフィドルがあります: http://jsfiddle.net/crowjonah/P5ydr/といくつかのコード:

// first, grap all the .fs boxes
$('.fs').wrap('<div class="g" />');

var group = [];
$('.col > .box').each(function() {
    group.push($(this));
    if (!$(this).next().hasClass('box')) {

        // next one doesnt have box class, so wrap group
        var target = $('<div class="g" />');
        $(group).each(function(){

            // add each grouped box to a g container
            $(this).clone().appendTo($(target));
        });

        // insert g container before the first box from the group its replacing
        $(target).insertBefore($(group)[0]);

        $(group).each(function(){
            // remove each original box from the group
            $(this).remove();
        });

        // make way for a new group of boxes
        group = [];
    }
});

可能であれば、あなたの状況を再考し、コンテンツを構造化し、マークアップを調整して、純粋な css がそのような恐ろしい JavaScript 依存関係なしに列を処理できるようにするより良い方法があるかどうかを確認します。

Answer 3

単純な .append と .prepend を使用して外側のボックス html コードを先頭と最後に追加し、すべての box.fs div の前に prepend を追加してみてください。