如何解决如何将元素移动到 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。