每个函数仅适用于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>