1

На странице в разных частях есть несколько элементов, при клике по кнопкам, мне нужно получить индекс родителя. Из всей коллекции подобных.

попробовал метод индекс, но не подходит. Кликнете по 5 элементу в списке, его индекс в коллекции 4, но в консоль выводится 5...

let $elements = $('[data-js="myel"]'),
  $tyk = $elements.find('button');

$tyk.click((e) => {
  let $current = $(e.target);
  $element = $current.closest('[data-js="myel"]');
  console.log($element.index());
});
.banner {
  display: block;
  position: relative;
  font-family: sans-serif;
  padding: 40px;
  background: #5eba7d;
  margin: 10px 0;
}

.el {
  display: block;
  position: relative;
  margin: 4px 0;
  background: #ccc;
  padding: 3px 15px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elements-list">
  <div class="el" data-js="myel">
    Первый элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">
    второй элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">
    трейтий элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">
    четвертый элемент
    <button>Тык</button>
  </div>
  <div class="banner">Какой то баннер</div>
  <div class="el" data-js="myel">

    пятый элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">
    шестой элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">

    седьмой элемент
    <button>Тык</button>
  </div>
  <div class="el" data-js="myel">
    восьмой элемент
    <button>Тык</button>
  </div>
</div>

1 ответ 1

1

Просто укажите селектор для элементов, чей индекс нужно получить:

let $elements = $('[data-js="myel"]');

$elements.click((e) => {
  let $current = $(e.target);
  console.log($current.index('[data-js="myel"]'));
});
.banner {
  display: block;
  position: relative;
  font-family: sans-serif;
  padding: 40px;
  background: #5eba7d;
  margin: 10px 0;
}

.el {
  display: block;
  position: relative;
  margin: 4px 0;
  background: #ccc;
  padding: 3px 15px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elements-list">
  <div class="el" data-js="myel">Первый элемент</div>
  <div class="el" data-js="myel">второй элемент</div>
  <div class="el" data-js="myel">трейтий элемент</div>
  <div class="el" data-js="myel">четвертый элемент</div>
  <div class="banner">Какой то баннер</div>
  <div class="el" data-js="myel">пятый элемент</div>
  <div class="el" data-js="myel">шестой элемент</div>
  <div class="el" data-js="myel">седьмой элемент</div>
  <div class="el" data-js="myel">восьмой элемент</div>
</div>

1
  • 1
    можно и в обратную сторону e => $elements.index($(e.target))
    – teran
    29 дек 2020 в 9:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.