Question

请你看看这段代码，让我知道为什么我无法将数组项添加到.box中？我已经使用了.text（）和.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(",");
    for (var j = 0; j <letters.length; j++) {
        $(".box").html(letters[j]);
     }

但他们只添加最后一项＆＃34; Z＆＃34;进入框

Answer 1

您需要使用.append()因为.html()每次都会替换整个html

Answer 2

因为您正在使用.html()替换任何预先存在的文字和新文字。

改为使用.append()：

 $(".box").append(letters[j]);

Answer 3

那是因为html没有追加，但会替换内容。

解决方案可能是使用append而不是html，但如果你有一个大数组，那就慢了。在这种情况下，最佳做法是一次性构建HTML：

$(".box").html(letters.join(''));

如果你想要的是在更改框之间有延迟，你可以使用setTimeout：

(function step(){
  var letter = letters.shift();
  if (!letter) return;
  $('.box').html(letter)
  setTimeout(step,200);
})()

Answer 4

.html（）将替换循环的每次迭代中的内容。在第一次迭代中，A＆＃39;将被放入（＆＃34; .box＆＃34;）和第二次迭代＆＃39; B＆＃39;将由＆＃39; A＆＃39;取代等等。当循环结束最后一个字母＆＃39; Z＆＃39;将是（＆＃39; .box＆＃39;）中的唯一内容。如果你想在（＆＃39; .box＆＃39;）中添加所有字母，请使用.append（）

请参阅链接：http://api.jquery.com/append/

Answer 5

您需要延迟更新框，以便一个接一个地显示字母：

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(",");
next();

function next() {
    if( letters && letters.length) {
     $(".box").text(letters.shift());
     window.setTimeout(next, 500);
    }
}

将数组项处理成Div的问题

5 个答案: