Как получить индекс элемента в jquery коллекции?

Question

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

попробовал метод индекс, но не подходит. Кликнете по 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>

Answer 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>

Answer 2

<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>

<script>
$('.el').attr('data-el', function(index) {return (index+1)});

$('.el').each(function(){
$('<span></span>').appendTo($(this).find('button'))});

$('.el').each(function(){
var a = $(this).attr('data-el');
$(this).find('span').html(a).hide()});

$('.el button').click(function(){
$(this).find('span').show()});
</script>

БЛОГ НА HUSL

Как получить индекс элемента в jquery коллекции?

Ответы (2 шт):