Ersetzen Sie Zeichen in einer Spanne mit Zeilenumbruch

Question

Ich versuche, ein kleines Ding für ein paar Stunden zu tun, und ich weiß nicht, warum nichts für mich funktioniert.

Das Problem ist, ich möchte jede Spanne mit Klasse "Variante" nehmen und ändern Sie ihren Inhalt auf eine Weise, dass jeder ";" Semikolon wird durch einen Zeilenumbruch ersetzt. Ich habe Dutzende von Lösungen versucht und nichts funktioniert.

<span class="variant">Coin Wallet: Yes (+7,5 €); Business Card Holder: No; Monogram + 16,25 € (max. 10 symbols): </span> 

Ich habe versucht, Lösungen wie:

$(document).ready(function() { 
var text = $(".variant").val().replace(/\;/g, "<br>"); 
$(".variant").val(text); 
}); 

oder

$(document).ready(function() { 
$(".variant").replaceText(/;/gi, "<br>"); 
}); 

Answer 1

Span Elemente keine Werte haben. So können Sie ihren Inhalt festlegen oder abrufen, indem Sie html() und text() verwenden. Die einzigen Elemente mit Werten sind Eingabeelemente, in denen Sie val() verwenden würden.

<span class="variant">Coin Wallet: Yes (+7,5 €); Business Card Holder: No; Monogram + 16,25 € (max. 10 symbols): </span> 
<button id="replace">Replace!</button> 

Schleife durch alle Elemente mit der <span><class> „Variante“ der .each() Methode jQuery und ersetzen.

$("#replace").click(function(){ 
    $("span[class='variant']").each(function() { 
    var text = $(".variant").html().replace(/\;/g, "<br>"); 
    $(this).html(text); 
    }); 
}); 

Fiddle: https://jsfiddle.net/rdawkins/L5pprh0d/1/