如您所知,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>
我该怎么做?
最佳答案
使用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>
关于javascript - 一个分区中的所有段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36751529/