如何包装每个字母标记“跨度”，并添加相同的ID

Question

这是我现在有：DEMO

需要为每个字母添加ID相同跨度信... 是这样的：

<span id="t">t</span> 
<span id="e">e</span> 
<span id="s">s</span> 
<span id="t">t</span> 

感谢

HTML：

<div id="page-wrap"> 
<div class="form_floleft"> 
    <form> 
     <label for="">Your word:</label> <input class="text_field" type="text" name="your_word" placeholder="enter here"> 
    </form> 
    <div class="enter">ENTER</div> 
</div> 
<div class="txt"></div> 
<p></p> 

</div> 

个

JS：

(function($){ 
jQuery(document).ready(function(){ 
$(".enter").live('click', function(){ 
     var value = jQuery("input.text_field").val(); 
     jQuery(".txt").text(value); 
     var words = $('.txt').text().split(""); 
     var text = words.join("</span><span>"); 
     $("p").html("<span>" + text + "</span>"); 
    }); 
}); 
})(jQuery); 

Answer 1

为什么不尝试：

(function($){ 
jQuery(document).ready(function(){ 
$(".enter").live('click', function(){ 
    var value = jQuery("input.text_field").val(); 
    jQuery(".txt").text(value); 
    var words = $('.txt').text().split(""); 
    for (i in words) 
     words[i] = '<span id="' + words[i] + '">' + words[i] + '</span>'; 
    var text = words.join(''); 
    $("p").html(text); 
}); 
}); 
})(jQuery);