Как обернуть div вокруг каждой буквы в заданной пользователем строке

0

Я пытаюсь создать небольшое веб-приложение и хочу, чтобы пользователи вводили текст, который приложение просто анализирует PER LETTER, создавая небольшой div для каждого введенного символа (включая пробелы).

Код работает нормально, но я не могу отделить каждую букву на выходе. В настоящее время я могу только обернуть новый div вокруг строки в целом.

#userString - это текстовое поле, когда пользователь вводит вывод в #stringPush, должен быть идентичен вводу, но с div и span, обернутым вокруг каждой буквы (.letter ui-draggalble span #sort).

Я уверен, что мое использование "для" для поиска каждой буквы - вот где проблема. Любые мысли или советы очень ценятся. Благодарю!

$('#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/ Вот полный код.. вздох. Наверное, не должно быть так сложно.

Теги:
digit
user-input
keyup

1 ответ

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 на имя класса.

http://jsfiddle.net/7ZRZS/

Поделиться
  • 0
    Что делает $ .map?
  • 0
    ДА! Спасибо за связку! У меня есть еще одна проблема с пробелами, которые очень важны. Можно ли использовать этот код для создания того же комбо div / span для пробелов? Да, я никогда раньше не видел .map.
Показать ещё 12 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню