Question

我试图制作一个小型网络应用，并希望让用户输入文字 - 应用程序只需解析每个字母，为输入的每个字符（包括空格）创建一个小div。

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

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

我确定我使用＆＃39;用于＆＃39;寻找每个字母都是问题所在。任何想法或建议都非常感谢。谢谢！

$('#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/

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

1 个答案: