주어진 문자열의 각 문자 주위에 div를 둘러싸는 방법

Question

작은 웹 앱을 만들려고합니다. 사용자가 텍스트를 입력하도록하고 싶습니다. 앱에서 PER LETTER를 구문 분석하여 각각에 대해 작은 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/