javascript - 用 jQuery 包装 div

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 元素
• 使用nextUntil() - jQuery 的功能，用于查找 h3 后面的 div 元素，
• 将它们添加到集合中
• 将它们分别插入组数组

• 然后循环遍历这些组，并将每个组包装在一个 div 内

  var groups = [];

  $('h3').each(函数(索引，值){

  $head = $(值);

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

  });

  for(组中组){

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

  }

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

Here's the example code 。