为什么我的 for 循环多次生成每个响应？

Question

我正在尝试创建一个 for 循环，该循环生成接下来 5 天的日期并将它们打印在一个空的 h6 元素中，但不是一次生成 5 个日期，而是生成 5 个日期五次，如图所示在控制台日志中。（我知道 moment.js 不再推荐，这只是一个项目）

screenshot of the console log result

这是我的代码：

for (var x = 1; x <= 5; x++){
  $(".future-date").text(moment().add([x], "d").format("(MM/DD/YYYY)"));
  console.log($(".future-date").text());
}

结果是所有h6元素都显示第5个日期。

It should look like this, with 5 consecutive dates

相反，它们都显示最后日期。

我错过了什么？

Answer 1

您可以使用 eq 访问 jQuery 集合中的单个元素。

$(".future-date").eq(x - 1).text(moment().add([x], "d").format("(MM/DD/YYYY)"));

或者，您可以使用 .each。

$(".future-date").each(function(i){
  $(this).text(moment().add([i + 1], "d").format("(MM/DD/YYYY)"));
});

Answer 2

改用text(function)。这将遍历所有匹配元素并公开集合中每个元素的索引和每个元素实例的return计算值

当您在内部执行 $(selector).text(string) 时，它会遍历每个匹配的选择器并对每个选择器执行相同的操作。所以你的循环每次迭代都会将所有元素更改为相同的值，你最终只会看到所有元素中的最后一个

$(".future-date").text(function(i) {
  return moment().add([i + 1], "d").format("(MM/DD/YYYY)");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

<h4 class="future-date"></h4>
<h4 class="future-date"></h4>
<h4 class="future-date"></h4>
<h4 class="future-date"></h4>

为什么我的 for 循环多次生成每个响应？

Why is my for-loop generating each response multiple times?

javascript

jquery

for-loop

repeat

momentjs