Javascript 加载页面后使用jQuery生成包装div

我们正在使用生成以下HTML的CMS：

<h3 class="heading">Heading 1</h3>
  <div>Content</div>
  <div>More content</div>
  <div>Even more content</div>
<h3 class="heading">Heading 2</h3>
  <div>Some content</div>
  <div>Some more content</div>
<h3 class="heading">Heading 3</h3>
  <div>Other content</div>

标题1
内容
更多内容
更多内容
标题2
一些内容
更多内容
标题3
其他内容

不幸的是，我们无法轻松更改此结构，但我们希望添加以下div以用于手风琴样式的动态布局：

<div class="section">
  <h3 class="heading">Heading 1</h3>
    <div>Content</div>
    <div>More content</div>
    <div>Even more content</div>
</div>
<div class="section">
  <h3 class="heading">Heading 2</h3>
    <div>Some content</div>
    <div>Some more content</div>
</div>
<div class="section">
  <h3 class="heading">Heading 3</h3>
    <div>Other content</div>
</div>

标题1
内容
更多内容
更多内容
标题2
一些内容
更多内容
标题3
其他内容

我想知道在使用jQuery加载页面后如何添加包装div

代码必须遍历DOM，识别h3.heading，然后围绕该heading和下面的所有div创建一个包装父div

或者有没有更简单的方法来实现这一点？

示例：

$（'.heading'）。每个（函数（）{
$（this.nextUntil（'.heading'）。和self（）.wrapAll（''）；
});

这正是您需要的：

(function($) {
    $('h3').each(function() {
       $(this).nextUntil('h3').andSelf().wrapAll('<div class="section"/>');
    });
})(jQuery);

（函数（$）{
$（'h3'）。每个（函数（）{
$（this.nextUntil（'h3'）。和self（）.wrapAll（''）；
});
})（jQuery）；

---

下面是一个有效的例子：

试图让它成为一个没有运气的单行线。不错<代码>$（'h3.heading，h3.heading+div，h3.heading+div+div'）。wrapAll（''）；​​​哈哈-我被我的孩子分心了-好时机。你的比我的稍微好一点，因为你使用了

.heading

（我没有注意h3上的课程）。您应该创建一个封闭的div元素；）太棒了，多么干净的解决方案。谢谢。有一个可能的问题，在最后一组中，没有什么可以告诉nextUntil停止收集元素，因为没有更多的元素具有类标题。您可能希望/需要向选择器添加一些元素：$（this）.nextUntil（'.heading，a，input'）。。。我在这里写了一篇博客：

(function($) {
    $('h3').each(function() {
       $(this).nextUntil('h3').andSelf().wrapAll('<div class="section"/>');
    });
})(jQuery);