使用jQuery .each()遍历元素设序号却重复显示总数的问题求助

嘿，我完全懂你碰到的这个坑！这种情况我刚开始用jQuery的时候也踩过——问题出在你对.each()的参数理解和变量作用域上，咱们一步步捋清楚：

为什么会全显示总数？ #

大概率你的代码是类似这样的：

const items = $('.your-elements');
let itemCount = items.length; // 这里是6
items.each(function() {
  $(this).text(itemCount);
});

你以为.each()会帮你“递推”itemCount，但实际上这个变量在外部只被赋值了一次（就是总数6），.each()的每个回调函数都引用的是同一个itemCount变量，所以最后所有元素都显示6。

正确的jQuery写法：用.each()自带的索引 #

.each()的回调函数其实会自动传入两个参数：**索引值（从0开始）**和当前遍历的元素。咱们直接用这个索引，加1就得到了从1到总数的计数：

const items = $('.your-target-elements');
items.each(function(index) {
  // 索引从0开始，+1后就是1、2...6
  $(this).text(index + 1);
});

原生JS的实现方式 #

如果换成原生JS，不管是普通for循环还是forEach，逻辑都是类似的：

普通for循环（推荐用let，避免作用域问题）

const items = document.querySelectorAll('.your-target-elements');
for (let i = 0; i < items.length; i++) {
  items[i].textContent = i + 1;
}

这里用let声明i很重要——它会在每次循环时创建一个独立的变量，不会出现所有元素共享同一个i最终值的问题。

forEach遍历

const items = document.querySelectorAll('.your-target-elements');
items.forEach((item, index) => {
  item.textContent = index + 1;
});

和jQuery的.each()一样，forEach的回调也会传入索引，直接用就行，省心又不容易出错。

总结一下 #

核心就是别自己额外维护计数器啦，不管是jQuery还是原生JS的遍历方法，都已经把索引参数给你准备好了，直接用索引+1就能实现你要的从1到N的计数效果～

内容的提问来源于stack exchange，提问作者user5481714