每个功能仅对console.log有效

Question

Need to all classnames be saved as wrapped text to another div. Only last classname showing, but in console log it is working. Cannot figured out what is wrong.

 $(".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 ) sets the value of the html, so for each loop through it is setting the html to something else.

In your example it would be set to flute, then to oboe and then to clarinet.

A way around this would be to create a new element and append it to where you want.

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>