javascript - 循环遍历每个元素并按顺序打印值

Question

我有一些代码，我想循环遍历元素的数量，并在每个元素内设置从 1 到任意数量的文本。我的方法如下:

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    items.text(itemCount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>

但是它打印了总数 6 次。在这个具体示例中，为 6。

我理解 .each() 的方式是它单独迭代每个元素，我的想法是我能够传入 itemCount 的值并有它单独计算每个元素。如果我执行常规的普通 JS 循环，则代码片段中的结果将有意义，因为它在打印之前完成。

如何更改此方法以按顺序打印数字 (1 2 3 4 5 6) 而不是元素总数 6 次？

Answer 1

您必须使用 this 作为选择器，例如 $(this)。 this 引用每个循环上的元素。

目前，您正在使用items，它引用类为.item的所有html元素

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    $(this).text(itemCount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>