加载页面后使用 jQuery 生成包装 DIV答案

【问题标题】：Using jQuery to generate wrapping DIVs once page is loaded加载页面后使用 jQuery 生成包装 DIV
【发布时间】：2012-11-06 04:37:16
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

试图让它成为一个没有运气的班轮。好东西。 $('h3.heading, h3.heading+div, h3.heading+div+div').wrapAll('<div class="section "/>');
哈哈 - 我被我的孩子分心了 - 好时机。你的比我的稍微好一点，因为你使用.heading（我没有注意h3上的课程）。你应该创建一个封闭的 div 元素；）
太棒了，多么干净的解决方案。谢谢。
有一个可能的问题，在最后一组中，没有什么可以告诉 nextUntil 停止收集元素，因为没有更多带有类标题的元素。您可能想要/需要向选择器中添加一些元素：$(this).nextUntil('.heading, a, input')... 我在这里写了一篇博客：weblogs.asp.net/stevewellens/archive/2012/04/06/…

【解决方案2】：

这应该正是您所需要的：

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

这是一个工作示例：http://jsfiddle.net/SFVQP/

【讨论】：