Korzystanie z jQuery: Jak zawijasz każdą literę w tagu?

Question

Spędziłem dwa dni na tym, więc będę się zniechęcać, jeśli istnieje prosta odpowiedź. Próbuję umieścić znacznik zakresu wokół każdej litery w div, pozostawiając resztę znaczników w stanie nienaruszonym.

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

Podchodzę bardzo blisko, ale na końcu coś zawsze mnie podnieca.

Answer 1

Mam to! To może nie być optymalne rozwiązanie, ale działa! Zauważ, że ze względu na dodatkowe znaczniki, białe spacje mogą zostać popsute. To również owija zakładki, ale i to jest łatwe do naprawienia.

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(); 
} 

Zastosowanie:

$("#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(); 
} 

To działa dość dobrze. Jednakże, tj. (7 tak), usuwa wszystkie spacje. Ponadto, czy powinienem usunąć newtarget z domeny na końcu funkcji? A co z klonem? Czy należy to usunąć?

Answer 3

Możesz chcieć rzucić okiem na moją wtyczkę, TextGrad, która pozwala dokładnie to zrobić z metodą "spanize" dodaną w obiekcie jQuery.

http://github.com/subtenante/TextGrad

Edit:

zapomniałem mam demo tam (!):

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