Tengo la siguiente estructura div :
<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> Por ejemplo, si paso el mouse sobre la primera clase: document.getElementbyClassName('test')[0] , debería obtener el valor de índice 0.
Editar: estoy buscando una solución JS pura
Puedes usar el siguiente código:
$('.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>Para hacer esto en JS puro, puede usar querySelectorAll() para recuperar los elementos de destino y vincularles un controlador de eventos mouseenter . Luego, puede encontrar el índice del elemento que desencadenó el evento comparándolo con la colección de elementos secundarios en el elemento principal. Algo como esto:
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>Este código usa un script Java puro:
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>