使用jquery将一系列元素包装在两个h2标签之间

我目前有一个动态创建的页面，如下所示：

<h2>a Heading</h2>
<p>a paragraph</p> 
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  

<h2>a Heading</h2>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  

我想做的是使用 jQuery 来包装h2 and p标签直到下一个h2标签： 例如：

<div class="headingName">
<h2>a Heading</h2>  
<p>a paragraph</p> 
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>
</div>

<div class="headingName">
<h2>a Heading</h2>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
<p>a paragraph</p>  
</div>

到目前为止，我没有成功地做到这一点，但已经使用此处用户的代码接近了（找不到原始文章的链接）：

$('.report-content h2').each(function(){
    var $set = $();
    var nxt = this.nextSibling;
    while(nxt) {
        if(!$(nxt).is('.report-content h2')) {
            $set.push(nxt);
            nxt = nxt.nextSibling;
        } else break;
    } 
   $set.wrapAll('<div class="content" />');
});

我得到的是div只缠绕在p标签，但需要包含关联的h2标签，通常是上面的标签p tags.

各取h2，抓住所有兄弟姐妹，直到获得另一个h2（或者此级别没有元素），然后重新包含h2在集合中。这是 JSFiddle。

$('.report-content h2').each(function(){ 
    $(this)
        .nextUntil("h2")
        .addBack()
        .wrapAll('<div class="content" />');
});

jQuery 文档

• 下一个直到
• addBack
• wrapAll