如何使用jQuery将每个div.one插入到紧邻的下一个div.two内部

现有DOM结构 #

<div id="list">
 <div class="box one"></div>
 <div class="box two"></div>
 <div class="box one"></div>
 <div class="box two"></div>
 <div class="box one"></div>
 <div class="box two"></div>
</div>

期望实现的DOM结构 #

<div id="list">
  <div class="box two">
    <div class="box one"></div>
  </div>
  <div class="box two">
    <div class="box one"></div>
  </div>
  <div class="box two">
    <div class="box one"></div>
  </div>
</div>

原有代码错误分析 #

你写的代码存在两个核心问题：

• prependTo()传入的参数是全局选择器.box.two，没有限定范围为当前div.one紧邻的下一个元素，每次执行都会把当前div.one插入到页面中所有匹配.box.two的元素内部，直接导致所有one元素被重复插入到每一个two中。
• 末尾链式调用的.next()没有任何实际作用：它既没有作为选择器的筛选条件，返回值也没有被接收使用，执行后不会对逻辑产生任何影响。

原有错误代码：

$("#list .box.one").each(function() {
    $(this).prependTo(".box.two").next();
});

正确实现代码 #

$("#list .box.one").each(function() {
    // 定位当前元素紧邻的下一个class为box two的同级元素
    const $target = $(this).next(".box.two");
    // 将当前one元素插入到对应two元素的内部开头
    $(this).prependTo($target);
});

逻辑说明：$(this).next(".box.two")只会选中当前元素后方紧邻的、匹配选择器的第一个同级元素，不会匹配全局所有two元素，从根源上避免重复插入的问题。

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