如何将 div 包裹在用户给定字符串中的每个字母周围

Question

我正在尝试制作一个小型网络应用程序，并希望让用户输入文本 - 该应用程序将简单地解析每个字母，为输入的每个字符（包括空格）创建一个小 div。

代码运行正常，但我似乎无法分隔输出中的每个字母。目前我只能在整个字符串周围包裹一个新的 div。

#userString 是一个文本框，当用户键入时，#stringPush 中的输出应该与输入相同，但每个字母周围都有一个 div 和 span（.letter ui-draggalble span #sort）。

我确信我使用“for”来查找每个字母是问题所在。非常感谢任何想法或建议。谢谢！

$('#userString').keyup(function() 
{
    var txt = $('input:text[id=userString]').val();
    for( var x = 0, c=''; c = txt.charAt(x); x++)
    { 
        $('#stringPush').html(txt).wrapInner("<div class='letter ui-draggable'><span id='sort'></span></div>");
    }
});

http://jsfiddle.net/S7FJ8/5/ 这是完整的代码.. 叹息。应该不会那么难。

Answer 1

试试这个：

$('#userString').keyup(function() {
    var txt = $.trim(this.value).split('');
    $('#stringPush').html(function() {
        return $.map(txt, function(letter) {
            return "<div class='letter ui-draggable'><span class='sort'>"+letter+"</span></div>"
        });
    });
});

请注意，ID 必须是唯一的，我已将 id 属性更改为类名。

http://jsfiddle.net/7ZRZS/