在分隔的div上包装生成的标签

Question

我生成了这个标记,我无法修改它:

<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标签数量不同所以我不知道如何定位.

Answer 1

使用可以使用

• header-selector - 选择标题元素
• nextUntil() - 选择文章下的所有其他兄弟元素
• addBack() - 将header元素添加回元素集
• wrapAll() - 用div包装所有元素

尝试

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

演示:小提琴

性能稍好的版本可以(因为它可以使用css选择器)

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

演示:小提琴