如何获取未设置style="display:none;"的列表项元素的索引

这里有几种实用的方法可以帮你定位目标列表项的索引：

方法一：原生JavaScript实现 #

不需要依赖任何外部库，直接用浏览器内置API就能搞定：

// 获取目标有序列表元素
const targetList = document.querySelector('ol');
// 获取列表下所有的li元素
const allItems = targetList.querySelectorAll('li');
// 用来存储可见列表项的索引
const visibleIndices = [];

// 遍历所有列表项
allItems.forEach((item, index) => {
  // 检查当前项的内联样式是否不是display:none
  if (item.style.display !== 'none') {
    visibleIndices.push(index); // 这里是0起始的索引，若需要1起始可改为index + 1
  }
});

console.log('可见列表项的索引：', visibleIndices); // 针对你的示例，输出结果为 [1]

方法二：jQuery实现（若项目已引入jQuery） #

如果你的项目正在使用jQuery，可以用更简洁的写法：

// 筛选出没有display:none内联样式的li，再提取它们的索引
const visibleIndices = $('ol li').not('[style*="display:none"]').map(function() {
  return $(this).index(); // 0起始索引，需要1起始的话加1即可
}).get();

console.log(visibleIndices); // 示例中输出 [1]

小提示 #

• 上述代码返回的是相对于父级ol的索引，如果需要的是整个页面中的全局DOM索引，逻辑需要稍作调整。
• 如果隐藏样式是通过类名而非内联style设置的，可以把判断条件改成检查类名，比如!item.classList.contains('your-hidden-class')。

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