В блоке div.divClass такой перечень элементов:
span p span p span ...
span - кликабельный, нужно на событие onCLick определить, какой по счету span нажат, как это сделать ?
Я пробовал через метод index(), но он учитывает не точки порядок спанов..
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуред.:
можно найти все предыдущие спаны через 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>
prevAll
.
Можно каждому span в этом листе выдать пользовательский атрибут - скажем, data-span-index - и проиндексировать их там. Потом в обработчике получать индекс (event.target.getAttribue('data-span-index')
или, средствами jq, event.target.attr('data-span-index')
)
Можно как-то так без библиотек. Поместить все 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)
}
})