將數據填充到我所有的跨度中

Question

我有8個跨度，在頁面加載時可以看到4個跨度，其中具有從數據庫檢索的值。 其他范圍在我自己的彈出框中，當用戶單擊按鈕以查看彈出窗口時，可見范圍內的值也必須位於彈出框內的范圍內。

因此，我對每個類使用了帶有兩個類的each（）函數，“。heart”是具有前4個跨度的類，這些跨度在頁面加載時可見。 “ .likes-count”是另一個在彈出框中具有4個跨度的類。

我的目的是將前4個跨度中的任何值分配給彈出框內的其他跨度。

我目前停留在下面的代碼中。

JS

 $('.heart, .likes-count').each(function(i, element) { var thisID = "#" + $(this).attr('id'); // '#like1', '#like2' var getAgain = "." + $(thisID + " span").attr('class'); // .likeCount1 getAgain = $(getAgain).text(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

您可以使用jQuery的each遍歷第一個div的范圍。 each回調函數each為您提供了一個索引參數，您可以使用該參數選擇另一個div的相應索引范圍。

 $("#hearts span").each(function(index){ var text = $(this).text(); $("#likes span").eq(index).text( text ); });//each 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="hearts"> <span>12</span> <span>24</span> <span>36</span> <span>48</span> </div> <div id="likes"> <span></span> <span></span> <span></span> <span></span> </div> 

Answer 2

嘗試這個：

$('.heart').each(function(i) {
  $('.likes-count:eq('+i+')').text($(this).text())
});

Answer 3

您可以使用.text()回調函數代替使用.each()來實現此目的：

 var heartspans = $("#hearts span"); $("#likes span").text(function(i,o){ return heartspans.eq(i).text(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="hearts"> <span>12</span> <span>24</span> <span>36</span> <span>48</span> </div> <div id="likes"> <span></span> <span></span> <span></span> <span></span> </div>