Форум

MC-XOBAHCK · #1 (**permalink**) 04.08.2019, 14:51

Не пойму какой должен быть синтаксис для метода findIndex.
Нужно при клике на пункт определить его индекс:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

<script>
    function navigation(e) {
        let el = e.target;
        let listItem = el.parentNode.querySelectorAll('li');
    
        let index = listItem.findIndex(item => item == el); // ?????
    
        console.log(index);
    }
    
    document.querySelector('ul').addEventListener('click', navigation);
</script>

j0hnik · #2 (**permalink**) 04.08.2019, 15:10

скажу пару слов а вы сами догадаетесь, нодлист это не массив.

j0hnik · #3 (**permalink**) 04.08.2019, 15:18

Все забыли, хотя на эту тему мы с вами уже говорили
напишите в консоле NodeList.prototype. и посмотрите какие методы и свойства доступны, есть ли там findIndex ?

MC-XOBAHCK · #4 (**permalink**) 04.08.2019, 15:35

j0hnik,
Спасибо вам за науку. Действительно у меня не массив.
Исправил так:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>
 
<script>
    function navigation(e) {
        let el = e.target;
        let listItem = el.parentNode.querySelectorAll('li');
     
        let index;
        listItem.forEach((item, i) => item == el ? index = i : 0);
     
        console.log(index);
    }
     
    document.querySelector('ul').addEventListener('click', navigation);
</script>

теперь работает.

j0hnik · #5 (**permalink**) 04.08.2019, 16:52

есть ещё пару вариантов: унаследовать метод или сделать массив из нодлиста.

рони · #6 (**permalink**) 04.08.2019, 17:10

MC-XOBAHCK,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

<script>
    function navigation(e) {
        let el = e.target;
        let listItem = [...this.children];
        let index = listItem.indexOf(el);
        console.log(index);
    }

    document.querySelector('ul').addEventListener('click', navigation);
</script>


</body>
</html>

MC-XOBAHCK · #7 (**permalink**) 04.08.2019, 17:20

Сообщение от j0hnik

есть ещё пару вариантов: унаследовать метод или сделать массив из нодлиста.

Ага, исправил так:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>
  
<script>
    function navigation(e) {
        let el = e.target;
        let listItems = el.parentNode.querySelectorAll('li');
      
        let index = [...listItems].findIndex(item => item == el);
      
        console.log(index);
    }
      
    document.querySelector('ul').addEventListener('click', navigation);
</script>

оказывается я с самого начала правильно findIndex применял, только запарка получилась с типом данным. А я от отчаянья чего только не пихал в findIndex, перебирая варианты один глупее другого.

MC-XOBAHCK · #8 (**permalink**) 04.08.2019, 17:49

Сообщение от рони

let listItem = [...this.children];
let index = listItem.indexOf(el);

Спасибо!
А я в самом начале делал вообще так:

let listItems = el.parentNode.childNodes

и у меня в массиве помимо моих лишек оказались ещё и переносы с прочим мусором...

Исправил у себя на ваш вариант - работает, понятен и смотрится красивее чем моё findIndex.

Malleys · #9 (**permalink**) 05.08.2019, 02:49

Сообщение от рони

let listItem = [...this.children];
let index = listItem.indexOf(el);

indexOf, как и многие другие методы массива, является обобщённым методом, this в определении не обязательно должен указывать на представителя типа Array. А это значит, что его можно использовать и с экземпляром NodeList, который не нужно приводить к массиву.

<ul>
	<li><button>Пункт 1</button></li>
	<li><button>Пункт 2</button></li>
	<li><button>Пункт 3</button></li>
</ul>

<script>
    function navigation(e) {
        const el = e.target;    
        const index = Array.prototype.indexOf.call(this.children, el.closest("li"));
        console.log(index);
    }
    
    document.querySelector("ul").addEventListener("click", navigation);
</script>

Alexandroppolus · #10 (**permalink**) 05.08.2019, 07:14

Malleys,
Помнится, ты был противником такого способа )
https://javascript.ru/forum/misc/758...tml#post498471

Форум

Справочник

Discord чат

Курсы javascript