如何选取第3个起数值大于0的span标签并将对应li切换为block显示

需求中提到了toggleClass方法，默认适配jQuery使用场景，同时也提供原生JS实现版本。

• 核心逻辑：
  1. 跳过前2个span元素，从第3个span开始遍历（DOM集合索引从0开始计数，第3个元素对应索引值为2）
  2. 逐个校验span内部文本，筛选出内容为大于0的有效数字的元素
  3. 定位符合条件的span对应的父级li元素，调用类切换方法，同时覆盖原有带!important的内联隐藏样式，设置元素正常显示

jQuery 实现版本 #

// :gt(1) 选中所有索引大于1的span，即从第3个span开始匹配
$('span:gt(1)').each(function () {
  const textVal = $(this).text().trim();
  const numVal = Number(textVal);
  // 校验值为有效数字且大于0
  if (!Number.isNaN(numVal) && numVal > 0) {
    $(this).closest('li')
      .toggleClass('your-target-class') // 替换为实际需要切换的类名
      .css('cssText', 'display: block !important;');
  }
});

原生JS 实现版本 #

如果项目未引入jQuery，可以用原生API实现完全一致的效果：

const spanList = document.querySelectorAll('span');
// 从索引2（第3个span）开始遍历
for (let i = 2; i < spanList.length; i++) {
  const currentSpan = spanList[i];
  const textVal = currentSpan.textContent.trim();
  const numVal = Number(textVal);
  if (!Number.isNaN(numVal) && numVal > 0) {
    const parentLi = currentSpan.closest('li');
    if (parentLi) {
      // 原生实现类切换
      parentLi.classList.toggle('your-target-class');
      // 覆盖带!important的内联样式
      parentLi.style.setProperty('display', 'block', 'important');
    }
  }
}

关键注意事项：
原DOM中li的隐藏样式添加了!important标记，直接设置display: block优先级不足无法覆盖，必须通过写入带优先级的样式规则才能生效。
数字校验前要先去除文本前后的空白字符，同时排除非数字内容转换后得到NaN的异常场景，避免判断逻辑失效。

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