(jquery) ändert verschachtelt gleichen HTML-Tag zu anderem bbcode Tag

Question

ok hier ist das, was ich habe:

<div id="mydiv"> 
<font color="green"><font size="3"><font face="helvetica">hello world</font></font></font> 
</div> 

Ich weiß, dass die Tags sind seltsam, aber das ist, was von der Website produziert. Also im Grunde ich die Schriftart-Tag bbcdoe Tag ändern möchten, die jQuery-Code schrieb ich:

$("#mydiv").find("font").text(function(){ 
    var text = $(this).text(); 
    var size = $(this).attr("size"); 
    var color = $(this).attr("color"); 
    var face = $(this).attr("face");; 
    if(size!=undefined){ 
     return '[size="'+size+'"]'+text+'[/size]'; 
    } 
    if(color!=undefined){ 
     return '[color="'+color+'"]'+text+'[/color]'; 
    } 
    if(face!=undefined){ 
     return '[type="'+face+'"]'+text+'[/type]'; 
    } 

}); 

so was habe ich nur: [color = "green"] Hallo Welt [/ color]. immer nur das erste Tag. irgendeine Idee?

ps: Ich habe versucht, jedes, replaceWith, html(), alle das gleiche Ergebnis. Nur das erste Tag wird geändert.

Answer 1

Der Grund ist es nicht der Fall funktioniert, denn wenn man

$("#mydiv").find("font").text("New text") 

Für jeden Schriftart-Tag nennt, vom ersten Tag startet, wird es den Text innerhalb dieses Tags ersetzen.

Hier ist ein Beispiel, um Ihnen zu zeigen, was vor sich geht.

Example |

Code

$fonts = $("font","#mydiv"); 

console.log($fonts.text()); 

$fonts.text(function(){ 
    return "New text"; 
}); 

console.log($fonts.text()); 

Hier ist ein Beispiel dafür, wie Sie es tun könnte stattdessen

Example | Code

Answer 2

Scheint mir Ihre erste Linie sein sollte:

$("#mydiv").find("font").each(function(){ 

Answer 3

Ein Raum voller traurig, Kätzchen Heulen wünscht sich, dass Sie dieser <font> Tags loswerden würde, aber man konnte es wahrscheinlich explizit machen arbeiten Arbeits Ihr Weg durch die verschachtelten Tags.

Es tut, was es jetzt tut, weil der äußere Aufruf an .text() für das erste <font> Tag läuft, und es löscht die anderen Tags aus.

bearbeiten — zu klären, wenn Sie

$('#mydiv').find('font') 

jQuery nennen 3 Font-Tags finden. Die Bibliothek ruft daher für jedes dieser Elemente die Funktion auf, die Sie an .text() übergeben haben. Der erste Aufruf führt jedoch dazu, dass die anderen beiden Elemente aus dem DOM entfernt werden. Auch wenn die Bibliothek den Rückruf für diese Elemente aufruft, gibt es keinen Effekt, da sie nicht mehr auf der Seite sind.

Hier ist, was funktionieren könnte:

var $fonts = $('#mydiv').find('font'); 
var text = $fonts.text(); 

var attrs = {}; 
$fonts.each(function(_, font) { 
    var names = ["size", "color", "face"]; 
    for (var i = 0; i < names.length; ++i) 
    if (font[names[i]]) attrs[names[i]] = font[names[i]]; 
}); 

var newText = ""; 
for (var name in attrs) { 
    if (attrs.hasOwnProperty(name)) 
    newText += '[' + name + '=' + attrs[name] + ']'; 
} 
newText += text; 
for (var name in attrs) { 
    if (attrs.hasOwnProperty(name)) 
    newText += '[/' + name + ']'; 
} 

$('#mydiv').text(newText); 

Beachten Sie, dass ich bin nicht wirklich sicher, warum Sie die BBCode auf die Seite so setzen wollen, aber es scheint die Absicht zu sein.