Question

我需要用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>

div不能被任何id或类标识，所以我需要找到一种方法来包装跟随h3的所有div。

Answer 1

你可以

遍历h3元素
使用jQuery的nextUntil() - 函数来查找h3后面的div元素，
将它们添加到集合
将每个人推入群组数组
然后遍历组，并将它们包装在div
中
var groups = [];

$（'h3'）。each（function（index，value）{

$ head = $（value）;

var $ group = $ head.add（$ head.nextUntil（'h3'，'div'））; groups.push（$基）;

}）;

for（group in groups）{

$（组[组]）wrapAll（ ''）;

}

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

Here's the example code。

Answer 2

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

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

用jQuery包装div

2 个答案: