click - 各文字をラップして「スパン」タグを付け、同じ 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);