Javascript 在分隔的div上换行生成的标记

我已生成此标记，无法修改它：

<h2>Title</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<h3>Title</h3>
<p>text</p>
<p>text</p>
<p>text</p>
    <p>text</p>
    <p>text</p>
<h3>Title</h3>
<p>text</p>
<p>text</p>

标题
正文

正文

正文

标题
正文

正文

正文

正文

正文

标题
正文

正文

我想使用jQuery将其包装成这样：

<div class="article">
    <h2>Title</h2>
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>
<div class="article">
    <h3>Title</h3>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>
<div class="article">
    <h3>Title</h3>
    <p>text</p>
    <p>text</p>
</div>

标题
正文

正文

正文

标题
正文

正文

正文

正文

正文

标题
正文

正文

你知道怎么做吗？正如您所见，

p

标记的数量各不相同，因此我不知道如何针对这一点。

使用可以使用

• -选择标题元素
• -选择项目下的所有其他同级元素
• -将标题元素添加回元素集
• -使用div包装所有元素

试一试

$（':header'）。每个（函数（）{
$（this）.nextUntil（':header'）.addBack（）.wrapAll（''）
})

演示：

---

性能稍好的版本可以是（因为它可以使用css选择器）

$（'h2，h3'）。每个（函数（）{
$（this.nextUntil（'h2，h3'）.addBack（）.wrapAll（“”）
})

演示：

$(':header').each(function(){
    $(this).nextUntil(':header').addBack().wrapAll('<div class="article" />')
})

$('h2, h3').each(function () {
    $(this).nextUntil('h2, h3').addBack().wrapAll('<div class="article" />')
})