各機能は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>