如何将元素移动到 DOM 中的下一个父元素？

问题描述

我正在努力将一个元素移动到 DOM 中的下一个元素。我可以移动它，但它不断重复到具有相同类的其他 div 中。

这是我的 HTML：

    <p>The first text that needs to be moved</p>
    <div class="tmb">
      <span class="price">500</span>
    </div>
    <p>Second text that needs to be moved</p>
    <div class="tmb">
      <span class="price">500</span>
    </div>

我想要发生的是第一个 p 元素将插入到第一个 .price 元素之后。第二个 p 元素将插入在第二个 .price 元素之后。我不能给 p 元素一个类，因为它们是动态创建的。

我有这个 jQuery：

   $(".tmb").prev("p").insertAfter("span.price");

但是这会在每个 p 元素之后移动 .price 元素，这是逻辑上的。我只希望它在 DOM 中遇到的第一个 .price 元素之后移动。

解决方法

为了实现这一点，您可以遍历所有 p 元素，因为有多个元素，然后使用 appendTo() 将它们添加到相关的 .tmb。试试这个：

$('p').each((i,p) => $(p).appendTo($(p).next('.tmb')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>The first text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>
<p>Second text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>

或者，您可以循环遍历所有前面带有 .tmb 和 p insertAfter() 的 .price 元素。

$('p + .tmb').each((i,t) => $(t).prev('p').insertAfter($(t).find('.price')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>The first text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>
<p>Second text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>