javascript - 将生成的标签包装在分离的 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() - 将标题元素添加回元素集
• wrapAll() - 用 div 包裹所有元素

尝试

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

演示:Fiddle

---

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

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

演示:Fiddle