一旦页面加载,使用jQuery生成包装DIV

Question

我们正在使用生成以下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>

不幸的是我们不能轻易地改变这个结构,但是我们想要在手风琴风格的动态布局中添加以下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>

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

代码必须遍历DOM,识别h3.heading,然后围绕标题和所有后续div创建一个包装父div.

或者有更简单的方法来实现这一目标吗？

Answer 1

示例:http://jsfiddle.net/TK6ay/1/

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