如何使用 jQuery/JavaScript 移动/复制跨度值并将其放入另一个 div

Question

如何使用 jQuery 移动/复制价格并将其放入<div class="info">中？

我正在使用此代码，但它给了我“102030”的答案。

 jQuery(document).ready(function($) { $(document).ready(function() { $(".items.price").appendTo(".info"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div class="items"> <span class="price">10</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">20</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">30</span> <img src="/url" alt="" /> <div class="info"> </div> </div> </div>

Answer 1

您可以使用.each循环遍历您的items div 并使用.find('.price').text()获取价格值并使用.text()在info div 中添加该值

演示代码：

 $(".items").each(function() { //find price value and assign it to info div $(this).find(".info").text($(this).find(".price").text()) //$(this).find(".price").remove() //if want to remove price div })

 .info { color: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div class="items"> <span class="price">10</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">20</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">30</span> <img src="/url" alt="" /> <div class="info"> </div> </div>

Answer 2

使用.each()查找每个元素的价格并.append()将其添加到.info中。

 $(document).ready(function(){ $(".items").each(function() { $(this).find(".info").append($(this).find(".price")) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div class="items"> <span class="price">10</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">20</span> <img src="/url" alt="" /> <div class="info"> </div> </div> <div class="items"> <span class="price">30</span> <img src="/url" alt="" /> <div class="info"> </div> </div> </div>

Answer 3

您可以使用以下示例使用 javacript/jquery 将价格移动/复制到另一个 div 或标签

$(document).ready(function () {
  $(".items").each(function(){
   var price = $(this).find('.price').text();
   $(this).find('.info').text(price);
  });

使用这个我希望它会工作