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

Question

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

<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 和 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 标签。

Answer 1

获取每个 h2，获取所有 sibling ，直到获得另一个 h2(或者此级别没有元素)，然后重新包含 h2 在集合中。 Here's the JSFiddle.

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

jQuery 文档

• nextUntil
• addBack
• wrapAll