Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2018, 18:17
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

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

Вот див внутри него блоки .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 и столкнулся с такой ситуацией, решил не удалять и задать этот вопрос. Вы тут люди высокого уровня и у вас есть чему поучится. Вдруг есть ещё какой способ определить индекс инпута в котором произошло событие.
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2018, 18:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от MC-XOBAHCK
я могу скриптом определить в каком инпуте произошло событие
indexOf
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2018, 18:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

индекс элемента в блоке
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>

Последний раз редактировалось рони, 09.09.2018 в 18:49.
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2018, 19:38
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

рони, Круто! Спасибо!
Смотрю я в эту строчку:
[].indexOf.call(inputs, el);

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

Крутое решение, если освою, то мне значительно упростит написание кода. Добавил себе indexOf и call в ежедневные задачки (буду придумывать задание и решать, чтобы усвоить и запомнить).
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2018, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от MC-XOBAHCK
как вы её собрали. Смотрю в учебник
https://learn.javascript.ru/traversi...массивы
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2018, 01:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

MC-XOBAHCK,
Видимо call из прошлой темы не до конца изучили, сам indexOf прост как 3 копейки
1.Набор в котором ищем 2. Что ищем
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2018, 13:49
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от j0hnik Посмотреть сообщение
MC-XOBAHCK,
Видимо call из прошлой темы не до конца изучили, сам indexOf прост как 3 копейки
1.Набор в котором ищем 2. Что ищем
В прошлой теме было map или filter, вы ещё дали совет что самому нужно попробовать написать функцию чтобы понять как работает метод.
А вообще у меня таких "изучений" здесь было оч. много, когда то мне показали решения со split, join, slice и мн. др. Конечно если бы кто в живую показывал и объяснял, то я бы намного больше выучил и понимал, но и тот результат что я достиг за год считаю неплохим. Всё таки ещё попутным ветром пришлось осваивать гальп, VSCode, Git и т.д.
Мне повезло что я попал на этот форум где есть люди которые подсказывают.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как определить предел желаемого (сколько может выдержать браузер)) al456 Элементы интерфейса 4 03.02.2013 23:20
Подскажите как быть в данной ситуации Saffoniy Общие вопросы Javascript 9 10.01.2013 01:37
Как определить тип элемента? OklickSpb Общие вопросы Javascript 3 09.01.2013 19:21
как узнать индекс? oxx Элементы интерфейса 4 14.11.2008 14:00
как определить шрифты scuter Общие вопросы Javascript 9 19.05.2008 14:32