jQuery：アウターコンテナとアコーディオンのペアをラップする

Question

アコーディオンに次の問題があります。私は外側のコンテナ "アコーディオン"と要素のペアを持っていますが、私は別のコンテナで各ペアをラップする必要があります。

<div id="accordion"> 
    <h2 class="head">Headline</h2> 
    <div class="content">Some content...</div> 
    <h2 class="head">Headline</h2> 
    <div class="content">Some content...</div> 
....more pairs 
</div> 

：私はアコーディオンwon't仕事...ので、私は追加のスニペットでdomready後にそれらをラップする必要があるので、私は

...前にそれらをラップcan't理解できるように、私はこれを得ました私はこれを必要とする：

<div id="accordion"> 
<div class="outer"> 
    <h2 class="head">Headline</h2> 
    <div class="content">Some content...</div> 
</div> 
<div class="outer"> 
    <h2 class="head">Headline</h2> 
    <div class="content">Some content...</div> 
</div> 
...more pairs 
</div> 

私はこれが仕事をすると思った。

$('.head').before('<div class="outer">'); 
$('.content').after('</div>'); 

...しかし、それはすでに閉じられたdiv要素を挿入します各見出しの前に誰も助けることができますか？

Answer 1

before()とafter()のようなメソッドを使用して要素全体を挿入することができます。あなたが望むものを達成するために

一つの方法は、ペアを一致させるためにnextUntil()のようなものを使用して、各<h2>/<div>ペアにwrapAll()を呼び出すために、次のようになります。

$("#accordion h2").each(function() { 
    $(this).nextUntil("h2").andSelf().wrapAll("<div class='outer'></div>"); 
}); 

Answer 2

この

$('.head:first,.content:first').wrapAll('<div class="outer">'); 
    $('.head:last,.content:last').wrapAll('<div class="outer">'); 

JSFiddleをお試しくださいExample