Sử dụng jQuery: Làm thế nào để bạn quấn từng chữ cái trong một thẻ?

Question

Tôi đã dành hai ngày về điều này, vì vậy tôi sẽ chán nản nếu có một câu trả lời đơn giản. Tôi đang cố gắng để đặt một thẻ span xung quanh mỗi chữ cái trong một div, trong khi rời khỏi phần còn lại của các thẻ còn nguyên vẹn.

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

Tôi nhận được rất gần, nhưng một cái gì đó luôn luôn đi tôi cuối cùng.

Answer 1

Tôi hiểu rồi! Đây có thể không phải là giải pháp tối ưu, nhưng nó hoạt động! Cũng lưu ý rằng vì các thẻ phụ, khoảng trắng có thể bị rối tung lên. Điều này cũng kết thúc tốt đẹp các tab nhưng điều đó cũng dễ sửa.

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

Cách sử dụng:

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

này hoạt động khá tốt. Tuy nhiên, tức là (7 anyway), dải ra tất cả các không gian. Ngoài ra, tôi nên loại bỏ newtarget từ dom ở phần cuối của hàm? Và những gì về bản sao? Điều đó có nên được loại bỏ không?

Answer 3

Bạn có thể muốn xem plugin của tôi, TextGrad, cho phép thực hiện chính xác điều đó bằng phương thức "spanize" được thêm vào trong đối tượng jQuery.

http://github.com/subtenante/TextGrad

Sửa:

tôi quên Tôi có một bản demo đó (!):

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