如何用jQuery将h2分隔的同class.box元素组包裹进wrapper

需求说明 #

将被<h2>元素分隔的所有.box元素组，分别包裹到class为wrapper的<div>容器中。

原始HTML代码 #

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
</div>

期望实现效果 #

<div class="container">
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
  <h2>heading2</h2>
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
   <h2>heading2</h2>
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
</div>

问题分析 #

之前尝试的代码会导致每个.box被单独包裹，核心原因是遍历了所有.box元素，每组内的每个.box都会执行一次wrapAll：

$(".box").each(function (index) {
    $(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper' />");
});

当第一组的第一个.box执行wrapAll后，该组的.box已经被包裹到wrapper中，后续的.box再执行时，nextUntil("h2")无法找到同组的其他.box，只能单独包裹自身。

解决方案 #

只需要遍历每组的第一个.box，再对该组执行wrapAll即可，有两种实现方式：

方式一：利用相邻选择器筛选组首.box #

// 筛选出前面不是.box的元素（即每组的第一个.box）
$(".box").not(".box + .box").each(function() {
  $(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper'></div>");
});

方式二：通过前置元素判断组首.box #

$(".container > .box").filter(function() {
  var prevEl = $(this).prev();
  // 要么是容器的第一个子元素，要么前置元素是h2
  return prevEl.length === 0 || prevEl.is("h2");
}).each(function() {
  $(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper'></div>");
});

这两种方式都会只针对每组的第一个.box执行包裹操作，确保整组.box被统一包在wrapper中。

内容的提问来源于stack exchange，提问作者Anta