如何在JS中将指定类元素转移到同组目标类区块中？

需求说明 #

将每个.block容器内的.moved-element元素，移动到同一容器内的.move-here区块最顶部，区块和元素数量无限制。

初始结构 #

<div class="block">
  <div class="move-here">Move here 1
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Move from here 1
    <p class="moved-element"><b>Moved element 1</b></p>
    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="move-here">Move here 2
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Move from here 2
    <p class="moved-element"><b>Moved element 2</b></p>
    <p>p7</p>
    <p>p8</p>
  </div>
</div>

期望结果 #

<div class="block">
  <div class="move-here">Move here 1
    <p class="moved-element"><b>Moved element 1</b></p>
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Move from here 1

    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="move-here">Move here 2
    <p class="moved-element"><b>Moved element 2</b></p>
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Move from here 2

    <p>p7</p>
    <p>p8</p>
  </div>
</div>

原有代码问题分析 #

• 原生JS代码一：document.querySelector('.move-here')仅获取页面第一个.move-here元素，导致所有待移动元素都被移到第一个区块，无法匹配对应容器。
• 原生JS代码二：element.closest('.move-here')查找的是元素祖先节点，但.moved-element的祖先中不存在.move-here，目标容器是同.block下的兄弟节点子元素，因此无法定位。
• jQuery代码：使用了错误的类名，且未限定区块范围，无法实现对应区块的元素移动。

原生JS实现方案 #

const elementsToMove = document.querySelectorAll('.moved-element');

elementsToMove.forEach(element => {
  // 获取当前元素所在的.block容器
  const parentBlock = element.closest('.block');
  // 在容器内找到对应的目标区块
  const targetContainer = parentBlock.querySelector('.move-here');
  // 将元素插入到目标区块最前面
  targetContainer.insertBefore(element, targetContainer.firstChild);
});

jQuery实现方案 #

// 遍历每个待移动元素
$('.moved-element').each(function() {
  // 定位当前元素所在区块内的目标容器
  const targetContainer = $(this).closest('.block').find('.move-here');
  // 将元素插入到目标容器最前面
  $(this).prependTo(targetContainer);
});

简洁链式写法：

$('.moved-element').prependTo(function() {
  return $(this).closest('.block').find('.move-here');
});

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