如何在jQuery中复用元素遍历的索引值进行类名判断？

嘿，针对你这个问题，我给你整理几个实用的方案，不管是在初始遍历的时候直接处理，还是后续代码里复用索引值都能用：

其实你已经在遍历每个<li>的时候拿到了index，完全可以在这个循环里就把需要的判断或操作做完，不用等到后续再去匹配类名——这是最直接高效的方式：

$('#test_form li').each(function(index) {
  const $li = $(this);
  $li.addClass('option-nr-' + index);
  
  // 这里直接用index做判断，一步到位
  if (index === 2) { // 比如判断索引是否为2
    // 执行你需要的操作，比如修改样式或绑定事件
    $li.css('color', '#ff4444');
  }
});

如果必须在后续的代码（比如用户触发某个事件后）里判断，那可以从<li>的类名中提取出索引数字：

// 遍历所有li，逐个提取索引并判断
$('#test_form li').each(function() {
  const $li = $(this);
  // 用正则匹配出"option-nr-"后面的数字部分
  const classMatch = $li.attr('class').match(/option-nr-(\d+)/);
  
  if (classMatch) {
    const index = parseInt(classMatch[1], 10); // 转成数字类型
    // 现在可以用index做判断了
    if (index === 3) {
      // 执行操作，比如隐藏这个li
      $li.hide();
    }
  }
});

如果是要直接定位某个特定索引的<li>，直接用类选择器就行，不用额外提取：

// 比如要找索引为2的li
const targetLi = $('#test_form li.option-nr-2');
if (targetLi.length > 0) {
  // 对目标元素执行操作
  targetLi.addClass('active-option');
}

比起通过类名存储索引，用jQuery的data()方法把索引存在元素的data属性里会更清晰，也能避免和其他类名混淆，完全符合数据与样式分离的原则：

// 初始赋值时同时存储索引到data属性
$('#test_form li').each(function(index) {
  const $li = $(this);
  $li.addClass('option-nr-' + index)
     .data('item-index', index); // 把索引存在data-item-index属性里
});

// 后续需要的时候直接读取data值
$('#test_form li').click(function() {
  const index = $(this).data('item-index');
  if (index === 1) {
    // 比如点击索引为1的li时弹出提示
    alert('你点击了索引为1的选项！');
  }
});

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