javascript - 从 NodeList 获取元素的索引

Question

我有一个简单的列表:

<ul id="list">
    <li id="item-1">1</li>
    <li id="item-2" style="display: none">2</li>
    <li id="item-3">3</li>
    <li id="item-4">4</li>
    <li id="item-5">5</li>
</ul>

并且需要获取特定项目的索引，忽略隐藏项目。

var list = document.getElementById('list');
var items = list.querySelectorAll('li:not([style*="display: none"])');

我尝试将 NodeList 转换为 Array:

var list_items = Array.from(items);

但不知道如何运行类似的东西:list_items.indexOf('item-3')

https://codepen.io/marcelo-villela-gusm-o/pen/RwNEVVB?editors=1010

Answer 1

你可以制作一个函数来在你想要的列表中找到你需要的id，传递两个参数，这样你就可以动态地使用这个函数。

基于 id，在函数内部只需要使用 .findIndex() 返回索引，如果找不到则返回 -1。

看这里:

var list = document.getElementById('list');
var items = list.querySelectorAll('li:not([style*="display: none"])');
var list_items = Array.from(items);

function getIndexById(idToSearch, list){
  //ES6 arrow function syntax
  return list.findIndex(elem => elem.id == idToSearch) 
  
  //normal syntax
  //return list.findIndex(function(elem) {return elem.id == idToSearch}) 

}

console.log("found at index: ", getIndexById("item-3", list_items))

<ul id="list">
    <li id="item-1">1</li>
    <li id="item-2" style="display: none">2</li>
    <li id="item-3">3</li>
    <li id="item-4">4</li>
    <li id="item-5">5</li>
</ul>

与问题不完全相关，但是如果可能的话，我建议您更改 HTML 以删除 display: none 的内联样式并将其更改为类，(例如:class='hidden')，当使用 :not 时，您的 .querySelector 会更好，例如:li:not(.hidden)，因为内联样式中的任何空格都会破坏您的选择器。 ("display:none" != "display: none"，注意空格)