Question

我正在尝试将一个单词的每个字母添加到动态生成的div .box和.boxIn中，但代码只是将最后一个单词添加到每个框中！你可以告诉我如何解决这个问题以及为什么会发生这种情况？有没有办法将两个循环合并为一个循环？

这是我的代码

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方法在第一个循环中设置生成的元素内容。

Answer 2

将这些组合起来相当简单，这样可以提高效率并消除你的html over ride错误

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 3

问题在于你设置html的方式。使用类boxIn选择所有元素，并将位置j的char设置为html（所有元素）。要仅将char设置为单个元素，可以使用.eq()函数限制选择。

在你的情况下：

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

如果要合并两个循环，可以直接在html字符串中设置值： for（var i = 0; i＆lt; word.length; i ++）{ $（＆＃39;＆＃39; + word.charAt（i）+＆＃39;＆＃39;）。appendTo（＆＃34; .wrapper＆＃34;）。children（＆＃39; .boxIn＆＃ 39;）。addClass（＆＃39;动画fadeInDown＆＃39;）; }

或者如果你要分开添加它：

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

将字符串数组中的字母添加到每个动态Div中的问题

3 个答案: