javascript - 一个分区中的所有段落

Question

如您所知，Wordpress 会像这样自动生成帖子的 html:

<h2>Heading Example</h2>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>

但我想在一个 div 中的标题之间制作所有段落，如下所示:

<h2>Heading Example</h2>
<div class="paragraphblock">
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
</div>
<h3>Heading Example</h3>
<div class="paragraphblock">
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
</div>
<h3>Heading Example</h3>

我该怎么做？

Answer 1

使用nextUntil()和 wrapAll()在 each()循环。

$('h2,h3').each(function(){
  $(this).nextUntil(':not(p)').wrapAll('<div>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h2>Heading Example</h2>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>

另一种选择。

$('h2,h3,p').each(function(){
  console.log(this.tagName)
  if(this.tagName == 'H2' || this.tagName == 'H3'){
    $div = $('<div>');
    $(this).after($div);
  } else {
    $div.append(this);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h2>Heading Example</h2>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h3>Heading Example</h3>