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

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

1 个答案: