如何为HTML中指定类的每个元素分配序列号？

嗨，这个需求在Web Analytics场景里太常见了——要给散落在DOM各个层级的.x元素分配全局连续的序列号，而且每个元素还得能自己拿到这个序号对吧？我给你两个实用的方案，不管用原生JS还是jQuery都能搞定：

方案一：原生JavaScript实现 #

核心思路是全局获取所有目标元素，再按文档流顺序给它们分配序号，完全不受DOM层级影响：

// 拿到页面上所有class为x的元素，顺序是它们在文档中出现的先后
const xElements = document.querySelectorAll('.x');

// 遍历元素集合，给每个元素分配序列号
xElements.forEach((element, index) => {
  // 序列号从1开始计数
  const sequenceNumber = index + 1;
  
  // 给元素添加符合HTML规范的自定义数据属性，方便后续读取
  element.dataset.sequence = sequenceNumber;
  
  // 如果需要像示例那样更新元素文本内容
  element.textContent = `I am div #${sequenceNumber}`;
  
  // 给元素绑定一个方法，让它能直接获取自己的序列号
  element.getSequence = function() {
    return parseInt(this.dataset.sequence, 10);
  };
});

之后不管哪个.x元素，都可以通过element.getSequence()或者element.dataset.sequence快速拿到自己的全局序号，完全不用管它在DOM树里的位置。

方案二：jQuery实现（如果你项目还在用jQuery） #

同样是先全局拉取所有目标元素，再逐个分配序号，避开.prevAll()的局限性：

// 获取所有.x元素，顺序遵循文档流出现顺序
const $xElements = $('.x');

$xElements.each(function(index) {
  const sequenceNumber = index + 1;
  
  // 用jQuery的data方法存储序列号
  $(this).data('sequence', sequenceNumber);
  
  // 更新元素文本（和示例一致）
  $(this).text(`I am div #${sequenceNumber}`);
  
  // 给jQuery元素添加获取序号的方法
  $(this).getSequence = function() {
    return $(this).data('sequence');
  };
});

额外提醒 #

如果你的页面会动态添加.x元素（比如AJAX加载、用户交互生成），记得在新元素插入DOM后，重新执行这段分配代码，或者在插入时直接给新元素分配「当前最大序号+1」，保证序列号连续。

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