关于将数组项目处理为分区的问题

Issue on Processing Array Items Into a Div

本文关键字：分区 问题 处理 项目 数组      更新时间：2023-09-26

你能看看这段代码，告诉我为什么我不能将数组项添加到.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]);
     }

但他们只将最后一项"Z"添加到

框中

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

因为您使用的是.html()，它用新文本替换任何预先存在的文本。

改为使用.append()：

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

.html（）将替换循环每次迭代时的内容。在第一次迭代中，"A"将被放在（".box"）中，在第二次迭代中"B"将被"A"替换，依此类推。循环结束时，最后一个字母"Z"将是（".box'"）中的唯一内容。如果您想在（".box'）中添加所有字母，请使用.append（）

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

这是因为html不追加而是替换内容。

一个解决方案可以是使用append而不是html，但如果您有一个大的阵列，这会很慢。在这种情况下，最佳实践是一次性构建HTML：

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

如果你想在盒子被更改之间有一个延迟，你可以使用setTimeout:

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

为了一个接一个地显示字母，您需要延迟更新方框：

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);
    }
}
相关文章：