如何包裝每個字母標記「跨度」，並添加相同的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);