jQueryを使用して要素のグループを囲みます

Question

要素のリストがあり、ページを読み込んだ後にヘッダーdivを使用して区切ります。だから、次のコード、

<div class="header">Header 1</div> 
<div class='test'>Test 1</div> 
<div class='test'>Test 2</div> 
<div class='test'>Test 3</div> 
<div class="header">Header 2</div> 
<div class='test'>Test 4</div> 
<div class='test'>Test 5</div> 
<div class='test'>Test 6</div> 
<div class='test'>Test 7</div> 
<div class='test'>Test 8</div> 
<div class="header">Header 3</div> 
<div class='test'>Test 9</div> 
<div class='test'>Test 10</div> 
<div class='test'>Test 11</div> 
<div class='test'>Test 12</div> 
<div class="header">Header 4</div> 
<div class='test'>Test 13</div> 
<div class='test'>Test 14</div> 

は、

<div class='wrap'> 
<div class="header">Header 1</div> 
<div class='test'>Test 1</div> 
<div class='test'>Test 2</div> 
<div class='test'>Test 3</div> 
</div> 
<div class='wrap'> 
<div class="header">Header 2</div> 
<div class='test'>Test 4</div> 
<div class='test'>Test 5</div> 
<div class='test'>Test 6</div> 
<div class='test'>Test 7</div> 
<div class='test'>Test 8</div> 
</div> 
<div class='wrap'> 
<div class="header">Header 3</div> 
<div class='test'>Test 9</div> 
<div class='test'>Test 10</div> 
<div class='test'>Test 11</div> 
<div class='test'>Test 12</div> 
</div> 
<div class='wrap'> 
<div class="header">Header 4</div> 
<div class='test'>Test 13</div> 
<div class='test'>Test 14</div> 
</div> 

任意のアイデアになるだろうか？前もって感謝します。

Answer 1

あなたがしたいことは、ひどい考えです。それはサーバーサイドでやるべきことのようなものです。 （常に例外があります）。

言われているように、次のコードはあなたが求めるものを行うはずです。

$('.header').each(function() { 
    var head = $(this); 

    if(!head.parent().hasClass('wrap')) { 
    head.before('div class="wrap"></div>'); 

    var wrap = head.prev(); 
    var curr = head; 

    do { 
     var currEl = curr; 
     curr = curr.next(); 

     currEl.appendTo(wrap); 
    } while(curr.length > 0 && !curr.hasClass('header')); 
    } 
}); 

注：

私はjQueryのを行うための標準的な方法があるものは何でも従わない場合、私は通常、jQueryのにとても残念発症しません。

Answer 2

これは別の方法です。アンドリューさんほどきれいではありません（EDIT：？私は彼を試み、それが動作していないですが、私はそれだけでいくつかのマイナーな監督だと確信しています）が、本質的には同じものん：

jQuery(function($){ 

    var $everything = $('.header,.test'); 
    var splitAtHeaders = []; 

    $everything.each(function(index){ 
    var $item = $(this); 
    if ('header'===$item.attr('className') || !splitAtHeaders.length) { 
     splitAtHeaders[splitAtHeaders.length] = []; 
    } 
    splitAtHeaders[splitAtHeaders.length-1].push($item); 
    }); 

    $.each(splitAtHeaders, function(){ 
    var currentWrapper = null; 
    $.each(this, function(index){ 
     if (0===index || !currentWrapper) { 
     currentWrapper = this.wrap('<div class="wrap"></div>'); 
     } 
     else { 
     currentWrapper.append(this); 
     } 
    }); 
    }); 

}); 

ここではデモです：http://jsbin.com/ojoqi/edit

しかし、私はあなたがそれを助けることができるなら、これがサーバー側で処理されるべきであることに同意します。

編集：私はアンドリューのソリューションを修正しようとしました。ここに私が思いついたことがあります：

$('.header').each(function() { 
    var next = $(this).next(); 
    var head = $(this).wrap('<div class="wrap"></div>'); 
    while (next && next.hasClass('test')) { 
    var curr = next; 
    next = next.next(); 
    head.append(curr); 
    }  
}); 

Answer 3

仮定：ヘッダーは異なるテキストを持ちます。そうでなければ、id属性のようにヘッダを区別するために別のものを使用します。

$("div.header").each(function() { 
    var $header = $(this); 

    var $tests = $.grep(
     $("div.test"), 
     function(n) { 
      return $(n).prevAll("div.header").text() == $header.text(); 
     }); 

    $.merge($header, $tests).wrapAll($("<div class='wrap'>")); 
}); 

Answer 4

私はこのようにそれを行うだろう：jQueryのバージョン1.4のよう

var divs = $('div'); 
var headers = divs.filter('.header'); 

if (headers.length != 0) { 
    var start = 0; 
    var wrapper = $('<div class="wrap" />'); 

    headers.each(function() { 
    var pos = divs.index(this); 
    divs.slice(start, pos - 1).wrapAll(wrapper.clone()); 
    start = pos; 
    }); 

    divs.slice(start).wrapAll(wrapper.clone()); 
} 

Answer 5

あなたはこのような何かをすることができ、nextUntil()方法を使用することができます。

var split_at = 'div.header'; 
$(split_at).each(function() { 
    $(this).add($(this).nextUntil(split_at)).wrapAll("<div class='wrap'/>"); 
}); 

Answer 6

実際には、ちょうど使用http://jquery.kidsil.net/next-and-prev-wrap/