javascript - 将 div 从列表移动到另一个位置

Question

我有一个用 ng-repeat 生成的元素列表，看起来像这样

...
<div class="a">
  <div>
    <div class="b"></div>
  </div>
</div>
<div class="a">
  <div>
    <div class="b"></div>
  </div>
</div>
...

我想将所有带有 class="b"的 div 移到它们带有 class="a"的父 div 之外，就像这样。

...
<div class="a">
  <div>
  </div>
</div>
<div class="b"></div>

<div class="a">
  <div>
  </div>
</div>
<div class="b"></div>
...

我目前正在尝试使用 jQuery

$(".b").insertAfter(".a")

它最终会为每个带有 class="a"的 div 生成一堆带有 class="b"的 div

Answer 1

使用 .each()遍历每个.b

$(".b").each(function(){
   $(this).insertAfter($(this).closest(".a"))
})

在你的代码中

$(".b").insertAfter(".a")

$(".b")找到所有 class = "b" 的 div在 DOM 中并将其插入每个 .a 之后