用jquery分隔每个字母

时间:2013-10-22 14:02:45

标签: jquery

如何分隔段落的每个字母?

当前的HTML

<div id="news">news flash</div>

结果应该是这样的

<div id="news">
<span>n</span><span>e</span><span>w</span><span>s</span><span>&nbsp;</span>
<span>f</span><span>l</span><span>a</span><span>s</span><span>h</span>
</div>

这样我就可以像在flash中一样或者准备好图像来为每个字母制作动画效果。

2 个答案:

答案 0 :(得分:3)

你可以做到

$('#news').html(function(_,html){
    return html.split('').map(function(letter){
       return '<span>'+letter+'</span>'
    }).join('');
})

Demonstration

答案 1 :(得分:0)

var txt = $("#news").html();
var spantxt="";
for(var i =0;i<txt.length;i++){
    spantxt+="<span>"+txt[i]+"</span>";
 }
$("#news").html(spantxt);