Индекс нажатого элемента в блоке

Question

В блоке div.divClass такой перечень элементов:

span p span p span ...

span - кликабельный, нужно на событие onCLick определить, какой по счету span нажат, как это сделать ?

Я пробовал через метод index(), но он учитывает не точки порядок спанов..

Answer 1

Можно каждому span в этом листе выдать пользовательский атрибут - скажем, data-span-index - и проиндексировать их там. Потом в обработчике получать индекс (event.target.getAttribue('data-span-index') или, средствами jq, event.target.attr('data-span-index'))

Answer 2

Можно как-то так без библиотек. Поместить все span в массив, и уже по нему искать порядок элемента

const block = document.querySelector('.block');
const spanArr = []
for (el of block.children) {
  if (el.tagName == 'SPAN') {
    spanArr.push(el)
  }
}

block.addEventListener('click', (e) => {
  let idx = spanArr.findIndex( span => span === e.target)
  if (idx !== -1) {
    idx++
    alert(idx)
  }
})

Answer 3

ред.: можно найти все предыдущие спаны через prevAll()

$("span").click(function(){
  let idx = $(this).prevAll("span").length;
  console.log(idx);
});

p { margin: 0; display: inline; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>span</span>
  <p>p</p>
  <span>span</span>
  <p>p</p>
  <span>span</span>
  <p>p</p>
</div>
<div>
  <span>span</span>
  <p>p</p>
  <span>span</span>
  <p>p</p>
  <span>span</span>
  <p>p</p>
</div>

БЛОГ НА HUSL

Индекс нажатого элемента в блоке

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