click - 如何包装每个字母以标记“span”并添加相同的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);