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

Question

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

这是我的 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 元素一个 class 因为它们是动态创建的。

我有这个jQuery:

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

但这在每个 .price 元素之后移动 p 元素，这是合乎逻辑的。我只想让它在 DOM.

中遇到的第一个 .price 元素之后移动

Answer 1

要实现此目的，您可以遍历所有 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>

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

How to move an element into the next parent element in the DOM?

jquery

dom

insertafter