Как обернуть аккордеонные пары внешним контейнером?

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>

Мне нужно это:

<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().

Один из способов добиться того, что вы хотите, это вызвать wrapAll () для каждого <h2> / <div> pair, используя что-то вроде nextUntil () для сопоставления пар:

$("#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 Пример