Вход

Просмотр полной версии : findIndex - найти индекс элемента

MC-XOBAHCK
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('cli ck', navigation);
</script>
j0hnik
04.08.2019, 15:10
скажу пару слов а вы сами догадаетесь, нодлист это не массив.
j0hnik
04.08.2019, 15:18
Все забыли, хотя на эту тему мы с вами уже говорили
напишите в консоле NodeList.prototype. и посмотрите какие методы и свойства доступны, есть ли там findIndex ?
MC-XOBAHCK
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('cli ck', navigation);
</script>

теперь работает.
j0hnik
04.08.2019, 16:52
есть ещё пару вариантов: унаследовать метод или сделать массив из нодлиста.
рони
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('cli ck', navigation);
</script>


</body>
</html>
MC-XOBAHCK
04.08.2019, 17:20
есть ещё пару вариантов: унаследовать метод или сделать массив из нодлиста.

Ага, исправил так:
<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('cli ck', navigation);
</script>

оказывается я с самого начала правильно findIndex применял, только запарка получилась с типом данным. А я от отчаянья чего только не пихал в findIndex, перебирая варианты один глупее другого.
MC-XOBAHCK
04.08.2019, 17:49
let listItem = [...this.children];
        let index = listItem.indexOf(el);

Спасибо!
А я в самом начале делал вообще так:
let listItems = el.parentNode.childNodes
и у меня в массиве помимо моих лишек оказались ещё и переносы с прочим мусором...

Исправил у себя на ваш вариант - работает, понятен и смотрится красивее чем моё findIndex.
Malleys
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
05.08.2019, 07:14
Malleys,
Помнится, ты был противником такого способа )
https://javascript.ru/forum/misc/75871-poluchit-koordinaty-yachejjki-iz-table.html#post498471
j0hnik
05.08.2019, 18:20
Помнится, ты был противником такого способа )
хотя этот вариант весьма неплох
Malleys
05.08.2019, 23:22
Помнится, ты был противником такого способа ) В моём примере не используется экземпляр типа Array. Почему вы решили, что способ, указанный в приведённой вами теме, со временем становится эффективным с моей точки зрения? Способ перечисления объектов, который показывает в примере Nexus, указанный в приведённой вами теме, является неэффективным.
j0hnik
06.08.2019, 00:14
Способ перечисления объектов, который показывает в примере Nexus, указанный в приведённой вами теме, является неэффективным.
это еще почему? Один циклический метод против двух.