javascript - 将字符串数组中的字母添加到每个动态 div

Question

我试图将单词的每个字母添加到动态生成的 div .box 和 .boxIn 但代码只是将最后一个单词添加到每个框!我该如何解决这个问题，他为什么会这样？有没有办法将两个循环合并为一个循环？

Here is the demo

这是我的代码:

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

那是因为你覆盖了所有 .boxIn 元素的 html 内容，你应该使用当前迭代器的索引来选择目标元素:

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

http://jsfiddle.net/k4spypqj/

也就是说没有必要使用 2 个循环。您可以使用 text 或 html 方法在第一个循环中设置生成的元素的内容。