Javascript-форум - Как определить индекс инпута в блоке в такой ситуации

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как определить индекс инпута в блоке в такой ситуации (https://javascript.ru/forum/misc/75167-kak-opredelit-indeks-inputa-v-bloke-v-takojj-situacii.html)

Как определить индекс инпута в блоке в такой ситуации

Здравствуйте!
Подскажите, можно ли определить индекс инпута внутри блока в такой ситуации.

Вот див внутри него блоки .test с инпутами:

<div class="wrapTest">
  <div class="test">
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
  </div>
  <div class="test">...</div>
  <div class="test">...</div>
</div>

Рядом стоят ещё такие же блоки, только в них может быть другое кол-во инпутов (поставил троеточие).

Так как эти блоки генерируются через class, ловлю событие focus на всплытие:

document.querySelector('.wrapTest').addEventListener('focus', function(e) {
    let el = e.target;

    if (el.tagName == 'INPUT') {
        /*let inputs = el.parentNode.querySelectorAll('input');
        console.log(inputs);*/
    }
}, true);

Подскажите, я могу скриптом определить в каком инпуте произошло событие focus (в первом, втором, третьем или четвёртом)?

Пока писал пост, нашёл решение что могу при генерации инпутов проставлять им name или data атрибуты со значениями индекса (0, 1, 2, 3...) и потом их вытягивать.

В принципе это легко решает мою задачу, но так как учу JS и столкнулся с такой ситуацией, решил не удалять и задать этот вопрос. Вы тут люди высокого уровня и у вас есть чему поучится. Вдруг есть ещё какой способ определить индекс инпута в котором произошло событие.

Цитата:

Сообщение от MC-XOBAHCK

я могу скриптом определить в каком инпуте произошло событие

indexOf

индекс элемента в блоке

MC-XOBAHCK,

<!DOCTYPE html>

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

</head>

<body>

<div class="wrapTest">
  <div class="test">
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
    <input type="text"> <span class="unit">м</span>
  </div>
  <div class="test">...</div>
  <div class="test">...</div>
</div>
<p></p>
<script>
 document.querySelector('.wrapTest').addEventListener('focus', function(e) {
    let el = e.target;

    if (el.tagName == 'INPUT') {
         let inputs = el.parentNode.querySelectorAll('input');
         let index = [].indexOf.call(inputs, el);
         document.querySelector('p').innerHTML = index;
    }
}, true);

</script>

</body>
</html>

рони, Круто! Спасибо!
Смотрю я в эту строчку:

[].indexOf.call(inputs, el);

и не понимаю как вы её собрали. Смотрю в учебник и в доки мазилы - недогоняю... Вроде как indexOf работает как функция в которую call передаёт аргументы с контекстом "этот".

Крутое решение, если освою, то мне значительно упростит написание кода. Добавил себе indexOf и call в ежедневные задачки (буду придумывать задание и решать, чтобы усвоить и запомнить).

Цитата:

Сообщение от MC-XOBAHCK

как вы её собрали. Смотрю в учебник

https://learn.javascript.ru/traversi...массивы

MC-XOBAHCK,
Видимо call из прошлой темы не до конца изучили, сам indexOf прост как 3 копейки
1.Набор в котором ищем 2. Что ищем

Цитата:

Сообщение от j0hnik (Сообщение 494314)

В прошлой теме было map или filter, вы ещё дали совет что самому нужно попробовать написать функцию чтобы понять как работает метод.
А вообще у меня таких "изучений" здесь было оч. много, когда то мне показали решения со split, join, slice и мн. др. Конечно если бы кто в живую показывал и объяснял, то я бы намного больше выучил и понимал, но и тот результат что я достиг за год считаю неплохим. Всё таки ещё попутным ветром пришлось осваивать гальп, VSCode, Git и т.д.
Мне повезло что я попал на этот форум где есть люди которые подсказывают.