0

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

4

2 回答 2

2

你可以

  • 遍历 h3 元素
  • 使用nextUntil()jQuery 的 - 函数查找 h3 之后的 div 元素，
  • 将它们添加到集合中
  • 将它们中的每一个推入组数组

  • 然后遍历这些组，并将它们中的每一个包装在一个 div 中

    变量组 = [];

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

    $头 = $(价值);

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

    });

    对于（分组）{

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

    }

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

这是示例代码。

于 2012-08-03T11:49:05.527 回答
1

从理论上讲，jQuery 函数“next()”或“nextAll()”或“nextUntill()”允许您找到所选元素的以下兄弟姐妹。因此，您可以根据 html 的结构尝试使用这些功能的东西。

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

于 2012-08-03T10:48:47.823 回答