用 jQuery 包装 div答案

【问题标题】：wrapping divs with jQuery用 jQuery 包装 div
【发布时间】：2012-08-01 09:34:56
【问题描述】：

我需要用 jQuery 将一些 div 包装到另一个 div 中，原始输出如下所示：

<div>Some content</div>
<div>Some content</div>

<h3>Local</h3>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>

<h3>Non-Local</h3>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>

我需要将它们包装起来，使它们看起来像这样：

<div>
    <div>Some content</div>
    <div>Some content</div>
</div>

<div>
    <h3>Local</h3>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
</div>

<div>
    <h3>Local</h3>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
</div>

无法通过任何 id 或类来识别 div，因此我需要找到一种方法来包装所有遵循 h3 的 div。

【问题讨论】：

对，你试过什么？
这确实是服务器端应该整理的东西，说实话
@Sam 我希望，代码是由 CMS (drupal) 生成的，我无法真正更改它
@woutr_be 我很擅长drupal，你能编辑一个模板文件来整理你的代码吗？或者你能解释一下这段代码是如何/在哪里生成的？
@Sam 这是一个使用分组的视图，但遗憾的是它没有包装组对象，它只是对它们进行排序。

标签： javascript jquery wrapall

【解决方案1】：

你可以

遍历 h3 元素
使用jQuery的nextUntil()-函数查找h3之后的div元素，
将它们添加到集合中
将它们中的每一个推入组数组中
然后循环遍历这些组，并将它们中的每一个包装在一个 div 中

var 组 = [];

$('h3').each(function(index, value) {

$head = $(值);

var $group = $head.add($head.nextUntil('h3', 'div')); groups.push($group);

});

for (group in groups) {

$(groups[group]).wrapAll('');

}

首先将组保存在组数组中的原因是，在遍历每个集合之前不要更改 HTML 结构。否则，后续调用也会找到添加的元素。

Here's the example code。

【讨论】：

效果很好，它只是没有包装前 2 个没有 h3 的 div，但我想出了如何解决这个问题。

【解决方案2】：

理论上，jQuery 函数“next()”或“nextAll()”或“nextUntill()”允许您找到所选元素的以下兄弟。因此，您可以根据 html 的结构尝试使用 those 函数。

jQuery API 文档中的 jQuery 文档here 中的更多帮助。

【讨论】：