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

Answer 2

这应该是您所需要的：

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

以下是一个有效的例子：http://jsfiddle.net/SFVQP/

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

2 个答案: