문자열 배열의 문자를 각 동적 div에 추가하는 문제

Question

동적으로 생성 된 div.box 및 .boxIn에 각 단어의 문자를 추가하려고하지만 코드는 각 상자에 마지막 단어를 추가하는 것입니다. 이 문제를 해결하는 방법과이 문제가 발생하는 이유를 알려주십시오. 두 개의 루프를 하나의 루프로 병합하는 방법이 있습니까?

Here is the Demo

이것은 당신이 모든 .boxIn 요소의 HTML 콘텐츠를 재정의하기 때문이다

var letters = []; 
var str = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"; 
var letters = str.split(","); 
var word = "Test App"; 
for (var i = 0; i < word.length; i++) { 
    $('<div class="box"><div class="boxIn"></div></div>').appendTo(".wrapper"); 
} 

for (var j = 0; j < word.length; j++) { 
    $('.boxIn').html(word.charAt(j)).addClass('animated fadeInDown'); 
} 

Answer 1

더 efficieent하고 당신이

var letters = []; 
var str = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"; 
var letters = str.split(","); 
var word = "Test App"; 
for (var i = 0; i < word.length; i++) { 
    $('<div class="box"><div class="boxIn animated fadeInDown">'+ 
       word.charAt(i)+'</div></div>').appendTo(".wrapper"); 
} 

DEMO

Answer 2

, 당신은 대상 요소를 선택하는 현재의 반복자의 인덱스를 사용해야 가지고있는 코드입니다 :

$('.boxIn').eq(j).html(word.charAt(j)).addClass('animated fadeInDown'); 

http://jsfiddle.net/k4spypqj/

,536,

2 개의 루프를 사용할 필요가 없다고 말하고 있습니다. text 또는 html 메소드를 사용하여 첫 번째 루프에서 생성 된 요소의 내용을 설정할 수 있습니다.

Answer 3

문제가 타고 버그를 통해 HTML을 없애 것이다 이러한 결합하는 매우 간단 당신이 설정 방법입니다 html. boxIn 클래스를 사용하여 모든 요소를 ​​선택하고 j 위치의 문자를 html (모든 요소 중)으로 설정합니다. char을 하나의 요소로만 설정하려면 .eq() 함수를 사용하여 선택을 제한 할 수 있습니다.

for (var j = 0; j < word.length; j++) { 
    $('.boxIn').eq(j).html(word.charAt(j)).addClass('animated fadeInDown'); 
} 

당신이 두 개의 루프를 병합 할 경우

, 당신은 당신의 HTML 문자열에 값을 직접 설정할 수 있습니다 : 것입니다 귀하의 경우

(var에 나는 = 0; 나는 < 단어. 길이 : i ++) { $ (''+ word.charAt (i) + '') .appendTo (". wrapper") children ('. boxIn'). addClass ('animated fadeInDown'); }

하거나 separatly을 추가 할 경우 :

for (var i = 0; i < word.length; i++) { 
    $('<div class="box"><div class="boxIn"></div></div>').appendTo(".wrapper").children('.boxIn').addClass('animated fadeInDown').html(word.charAt(i)); 
} 

jsfiddle