所有Paragrahps在一个分区

All Paragrahps in One Div

本文关键字：一个 分区 Paragrahps 所有      更新时间：2023-09-26

如您所知，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>

我该怎么做？

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

$('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>

相关文章：