Parece obvio, pero no puedo encontrar una solución. Tengo un par de Div con la misma clase y cuando pasa el mouse sobre ellos, quiero saber cuál pasó exactamente, como un valor de posición de la lista de nodos.
HTML
<div id="summary"> <div class="articles"></div> <div class="articles"></div> <div class="articles"></div> <div class="articles"></div> <div class="articles"></div> <div class="articles"></div> <div class="articles"></div> </div>JS
let articles = document.querySelectorAll(".articles"); for (let x of articles) { x.addEventListener('mouseenter', (e) => { p = Exact Position in Nodelist?? console.log(articles[p]); }); }Gracias.
Aquí hay una solución simple que se me ocurrió:
let articles = document.querySelectorAll(".articles"); for (let [position, article] of articles.entries()) { article.addEventListener('mouseenter', (e) => { console.log(position) // Exact Position in Nodelist console.log(articles[position]) // The Node hovered }); }Espero que mi ayuda sea útil.
Puede usar el mouseover en el padre, de esta manera solo agregará un oyente:
let articles = document.querySelectorAll(".articles"); var summary = document.getElementById("summary"); summary.addEventListener("mouseover", (e) => { if (e.target.classList.contains("articles")) { let position = Array.from(e.target.parentNode.children).indexOf(e.target); console.log(position,articles[position]); } }); .articles { width: 100px; height: 100px; border: solid 1px red; } <div id="summary"> <div class="articles">a</div> <div class="articles">b</div> <div class="articles">c</div> <div class="articles">d</div> <div class="articles">e</div> <div class="articles">f</div> <div class="articles">g</div> </div>Debe tomar los hijos del nodo principal y encontrar su índice como se muestra a continuación.
Prueba esto
let articles = document.querySelectorAll(".articles"); for (let x of articles) { x.addEventListener("mouseenter", (e) => { console.log([...e.target.parentNode.children].indexOf(e.target)); }); }Caja de arena de código => https://codesandbox.io/s/young-frost-x6u1x?file=/src/index.js