如何将每个字母包装成标签“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);