Обертывание не дочерних элементов в jquery

Question

В настоящее время у меня есть HTML-документ в следующем формате:

<h1>a</h1>
<p>bla</p>
<p>more bla</p>

<h1>b</h1>
<p>different bla</p>

Я ищу способ обернуть как <h1>, так и следующий <p> в div, чтобы он выгляделкак:

<div>
    <h1>a</h1>
    <p>bla</p>
    <p>more bla</p>
</div>

<div>
    <h1>b</h1>
    <p>different bla</p>
</div>

Но мне не удалось использовать wrap и wrapAll для достижения этой цели.

Answer 1

var tagName = 'h1';
$(tagName).each(function ()
{
    var $this = $(this);
    $this.add($this.nextUntil(tagName)).wrapAll('<div></div>');
});

Демо-демо Демо-демо Демо-демо

Answer 2

Если вы можете добавить еще несколько классов CSS, это может быть проще.Смотри http://jsfiddle.net/avaXp/

<h1 class='one'>a</h1>
<p class='one'>bla</p>
<p class='one'>more bla</p>

<h1 class='two'>b</h1>
<p class='two'>different bla</p>



$('.one').wrapAll("<div></div>")
$('.two').wrapAll("<div></div>")

Answer 3

То, что вы могли бы сделать, это создать <div> там, где вы хотите, в DOM, а затем переместить в него элементы, которые вы хотите быть внутри него.

Например (возможно, может быть лучше):

$("h1").before("<div></div>");
$("h1").each(function() {
    $(this)
        .nextUntil("h1").andSelf()
        .appendTo(
            $(this).prev("div")
        );
    });