I have the following div structure:
<div class="0">
<div class="test"></div>
</div>
<div class="1">
<div class="test"></div>
</div>
<div class="2">
<div class="test"></div>
</div>
<div class="3">
<div class="test"></div>
</div>
For example, if I hover on the 1st class: document.getElementbyClassName('test')[0], I should get index value is 0.
Edit: I'm looking for a pure JS solution
You can use the following code:
$('.test').mouseenter(function() {
console.log("index: " + $(this).index('.test'));
})
$('.test').mouseenter(function() {
console.log("index: " + $(this).index('.test'));
}).test {
height: 100px;
width: 100px;
border: 1px solid blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>To do this in pure JS you can use querySelectorAll() to retrieve the target elements and bind a mouseenter event handler to them. Then you can find the index of the element which triggered the event by comparing it to the collection of children in the parent. Something like this:
let elements = document.querySelectorAll('.test');
elements.forEach(el => el.addEventListener('mouseenter', e => {
let index = Array.from(elements).indexOf(e.target);
console.log(index);
}));<div class="1">
<div class="test">Test 1</div>
</div>
<div class="2">
<div class="test">Test 2</div>
</div>
<div class="3">
<div class="test">Test 3</div>
</div>
<div class="4">
<div class="test">Test 4</div>
</div>This code Use pure java script :
var divItems = document.querySelectorAll(".test");
var mytab = [];
var index = 0;
for (let i = 0; i < divItems.length; i++) {
mytab.push(divItems[i].innerHTML);
}
for (var i = 0; i < divItems.length; i++)
{
divItems[i].onmouseover = function ()
{
index = mytab.indexOf(this.innerHTML);
console.log(this.innerHTML + " Index = " + index);
};
}<div class="test">Hover me 1</div>
<div class="test">Hover me 2</div>
<div class="test">Hover me 3</div>
<div class="test">Hover me 4</div>