javascript - 如何将 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 属性更改为 className。

http://jsfiddle.net/7ZRZS/