使用jQuery：如何將每個字母包裝在標籤中？

Question

我已經花了兩天時間，所以如果有簡單的答案，我會感到灰心。我試圖在div中的每個字母周圍放置一個span標籤，同時保留其餘標籤不變。

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

我變得非常接近，但最終總是讓我失望。

Answer 1

我明白了！這可能不是最佳的解決方案，但它的工作原理！還要注意，由於額外的標籤，空白可能會混亂。這也包裝標籤，但也很容易解決。

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

用法：

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

這工作得相當好。然而，也就是（無論如何7），將所有的空間去掉。另外，我應該從函數結尾處的dom中移除newtarget嗎？克隆怎麼樣？應該刪除？

Answer 3

您可能想看看我的插件TextGrad，它允許使用jQuery對象中添加的「spanize」方法完成該操作。

http://github.com/subtenante/TextGrad

編輯：

我忘了我有一個演示存在（！）：

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