findIndex - найти индекс элемента
Не пойму какой должен быть синтаксис для метода 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>
|
скажу пару слов а вы сами догадаетесь, нодлист это не массив.
|
Все забыли, хотя на эту тему мы с вами уже говорили
напишите в консоле NodeList.prototype. и посмотрите какие методы и свойства доступны, есть ли там findIndex ? |
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>
теперь работает. |
есть ещё пару вариантов: унаследовать метод или сделать массив из нодлиста.
|
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>
|
Цитата:
<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, перебирая варианты один глупее другого. |
Цитата:
А я в самом начале делал вообще так: let listItems = el.parentNode.childNodes и у меня в массиве помимо моих лишек оказались ещё и переносы с прочим мусором... Исправил у себя на ваш вариант - работает, понятен и смотрится красивее чем моё findIndex. |
Цитата:
<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>
|
Malleys,
Помнится, ты был противником такого способа ) https://javascript.ru/forum/misc/758...tml#post498471 |
| Часовой пояс GMT +3, время: 15:57. |