I have a simple list:

<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>

And need to get index of a specific item disregarding hidden items.

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

I try to convert NodeList in Array:

var list_items = Array.from(items);

But don't known how to run something like that: list_items.indexOf('item-3')

I have a simple list:

<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>

And need to get index of a specific item disregarding hidden items.

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

I try to convert NodeList in Array:

var list_items = Array.from(items);

But don't known how to run something like that: list_items.indexOf('item-3')

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

• javascript

4 Answers 4

You can make a function to find the id you need in a list you want, passing two parameters, that way you can use this function dynamically.

Based on id, inside the function just need to use .findIndex() that returns the index or -1 if not found.

See here:

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>

Not exactly related to the question, but if possible, I would suggest you to change your HTML to remove that inline style of display: none and change it to a class, (e.g: class='hidden'), it would be better for your .querySelector when using :not, for example: li:not(.hidden), since any space in your inline style can break your selector. ("display:none" != "display: none", spot the space)

I would remend using :not(.hidden) instead of "grepping" for a match on the style tag. Then, simply find the index after casting the NodeList to an array.

For the Vue.js inclined, see this fiddle: https://jsfiddle/634ojdq0/

let items = [...document.querySelectorAll('#list li:not(.hidden)')]
let index = items.findIndex(item => item.id == 'item-4')

console.log('item-4 index in visible list is', index)

.hidden {
  display: none;
}

<ul id="list">
    <li id="item-1">1</li>
    <li id="item-2" class="hidden">2</li>
    <li id="item-3">3</li>
    <li id="item-4">4</li>
    <li id="item-5">5</li>
</ul>

Maybe like this:

var item = list_items.find(function(item) {
    return item.id === "item-3";
});

Maybe you can use map. First you can create an object with id and value. Then use map function to create array of this object. Then you can access it with foreach, when id = 'item-3'.