每個函數僅適用於console.log

Question

需要全部類名將其作爲包裝文本保存到另一個div。只顯示最後一個類名，但是在控制檯日誌中它正在工作。無法弄清楚什麼是錯的。

$(".score").children('div').each(function(arr) { 
 
    clsas = $(this).attr('class'); 
 
    $('.part-list').html(clsas); 
 
    clsas = clsas.replace(/_/gm, " ") 
 
       .replace(/(\d{1,}) (\d{1,})/gm, "$1, $2") 
 
       .replace(/stff /gm, "") 
 
       .replace(/(\B)(\d{1,})/gm, "$1 $2"); 
 
    console.log(clsas); 
 
}).each(function() { 
 
    $('.part-list').html("<div class='instrument'>" + clsas + "</div>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="part-list"></div> 
 
<div class="score"> 
 
<div class="stff_Flute1_2"></div> 
 
<div class="stff_Oboe_1_2"></div> 
 
<div class="stff_Clarinet_1_2"></div> 
 
</div>

https://jsfiddle.net/3od8uudf/2/

Answer 1

$的.html（串）設置HTML的價值，所以通過它每個迴路設置HTML別的東西。

在你的例子中，它將被設置爲長笛，然後是雙簧管，然後是單簧管。

解決這個問題的方法是創建一個新元素並將其添加到所需的位置。

Ex。

var txt1 = "<div class='instrument'>" + clsas + "</div>" ; // Create element with HTML 

$('.part-list').append(txt1);  // Append the new element 

Answer 2

$(".score").children('div').each(function(arr) { 
 
clsas = $(this).attr('class'); 
 
clsas = clsas.replace(/_/gm, " ").replace(/(\d{1,}) (\d{1,})/gm, "$1, $2").replace(/stff /gm, "").replace(/(\B)(\d{1,})/gm, "$1 $2"); 
 
    $('.part-list').append("<div class='instrument'>" + clsas + "</div><br>"); 
 
    }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="part-list"></div> 
 
<div class="score"> 
 
<div class="stff_Flute1_2"></div> 
 
<div class="stff_Oboe_1_2"></div> 
 
<div class="stff_Clarinet_1_2"></div> 
 
</div>