Javascript在循环中递增

Javascript increment up within a loop

本文关键字：循环 Javascript      更新时间：2023-09-26
    for (i = 0; i < arrayData.length; i++) {
      $(".swipe-wrap").append("<div class='"final'">Hello!</div>");
      console.log('hello');
    }

这就是我目前拥有的。我的arrayData是一个改变每个负载的数组。

我怎样才能得到它，所以我的类final每个for循环都会有一个这样的计数器：<div class="final_1">Hello!</div>，<div class="final_2">Hello!</div>.。

for (i = 0; i < arrayData.length; i++) {
  $(".swipe-wrap").append("<div class='"final_"+i+"'">Hello!</div>");
  console.log('hello');
}

你不应该在循环中执行 DOM 操作。始终执行批量操作。

试试这个：

var html = ""
for (i = 0; i < arrayData.length; i++) {
  html += '<div class="final_'+i+'">Hello!</div>';
  console.log('hello');
}
$(".swipe-wrap").append(html);

您也可以使用 Array.forEach .

var html = ""
var arrayData = ["test1", "test2", "test3", "test4", "test5"];
console.log(arrayData);
arrayData.forEach(function(item, index) {
  html += '<div class="tile final_' + index + '">Hello ' +item+ '!</div>';
  console.log('hello');
});
$(".swipe-wrap").append(html);
.swipe-wrap {
  background: #eee;
  padding: 10px;
  border: 1px solid gray;
}
.tile {
  width: auto;
  padding: 10px;
  margin: 10px;
  background: #fff;
  border: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="swipe-wrap"></div>

相关文章：