Utilizzo di jQuery: come si fa a racchiudere ogni lettera in un tag?

Question

Ho trascorso due giorni su questo, quindi sarò scoraggiato se c'è una risposta semplice. Sto provando a mettere un tag span attorno ad ogni lettera in un div, lasciando intatto il resto dei tag.

<div id="div"> 
    <p> 
     Of course some of the <strong>text is in other tags</strong> and <strong>some 
     is in <em>nested tags</em>, etc.</strong> 
    </p> 
</div> 

Mi avvicino molto, ma alla fine qualcosa mi incalza sempre.

Answer 1

Ho capito! Questa potrebbe non essere la soluzione ottimale, ma funziona! Si noti inoltre che a causa dei tag extra, lo spazio bianco potrebbe essere incasinato. Questo include anche le schede ma è anche facile da correggere.

function wrap(target) { 
    var newtarget = $("<div></div>"); 
    nodes = target.contents().clone(); // the clone is critical! 
    nodes.each(function() { 
     if (this.nodeType == 3) { // text 
      var newhtml = ""; 
      var text = this.wholeText; // maybe "textContent" is better? 
      for (var i=0; i < text.length; i++) { 
       if (text[i] == ' ') newhtml += " "; 
       else newhtml += "<span>" + text[i] + "</span>"; 
      } 
      newtarget.append($(newhtml)); 
     } 
     else { // recursion FTW! 
      $(this).html(wrap($(this))); 
      newtarget.append($(this)); 
     } 
    }); 
    return newtarget.html(); 
} 

Usage:

$("#div").html(wrap($("#div"))); 

Answer 2

function init(target) { 
var newtarget = $('<div></div>'); 
nodes = target.contents().clone(); // the clone is critical! 
nodes.each(function(i,v) { 
    if (v.nodeType == 3) { // text 
     if($.trim($(this).text()).length>0){ 
      var letters=$(this).text().split(''); 
      for (var j = 0; j < letters.length; j++) { 
       newtarget.append('<span class="letter">'+letters[j]+'</span>') 
      } 
     } 
    } 
    else { // recursion FTW! 
     newtarget.append($(this)); 
     $(this).html(init($(this))); 
    } 
}); 
return newtarget.html(); 
} 

Questo funziona abbastanza bene. Tuttavia, vale a dire (7 in ogni caso), elimina tutti gli spazi. Inoltre, dovrei rimuovere newtarget dal dom alla fine della funzione? E il clone? Dovrebbe essere rimosso?

Answer 3

Si potrebbe voler dare un'occhiata al mio plugin, TextGrad, che permette di fare esattamente questo con il metodo "spanize" aggiunto in oggetto jQuery.

http://github.com/subtenante/TextGrad

Edit:

ho dimenticato ho una demo lì (!):

http://www.si-les-idees-suffisaient.net/jquery/textgrad.html