javascript - 使用 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 以用于 Accordion 式动态布局:

<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"/>');
});