CODEWITHSUNDEEP
javascripteachconsole.logclassname
Dominik Svoboda
Dominik Svoboda

Reputation: 19

Each function is working only for console.log

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/

Upvotes: 0

Views: 62

Answers (2)

Pat Mellon
Pat Mellon

Reputation: 360

$(".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>

Upvotes: 0

SDhaliwal
SDhaliwal

Reputation: 174

$.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

Upvotes: 1

Related Questions