如何在用户给定的字符串中围绕每个字母包装div

Question

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

代码工作正常，但我似乎无法将输出中的每个字母分开。目前，我只能在整个字符串周围包装一个新的div。

#userString是一个文本框，当用户键入#stringPush时，输出应该与输入相同，但每个字母()周围都有div和span。

我确信我使用"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属性更改为className。

http://jsfiddle.net/7ZRZS/