每个功能仅对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（string）设置html的值，因此对于每次循环，都将html设置为其他值。

在您的示例中，它将设置为长笛，然后是双簧管，然后是单簧管。

一种解决方法是创建一个新元素并将其附加到所需的位置。

例如

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>