Estoy creando un grupo de <div> que tienen contenido separado:
<div class="container"> <div class="container__item"></div> <div class="container__item"></div> <div class="container__item myClass"></div> </div> Necesito poder obtener el valor de índice específico de un <div> cuando se aplica una determinada clase (por ejemplo, myClass )
const item = document.querySelector(".container__item"); const items = document.querySelectorAll(".container__item"); const myClass = document.querySelector(".myClass"); Estoy recorriendo la colección de elementos pero no puedo obtener el valor del índice, por ejemplo, 0, 1, 2 . Para su información, convertiré esos valores a 1, 2, 3 .
for (var i = 0; i < item.length; i++) { var hasClass = item[i]classList.contains(showItem); if (hasClass) { console.log(i); } }Puede seleccionar el elemento con la clase de container y recorrer todos sus elementos secundarios y luego tomar el índice de esos elementos secundarios donde className incluye myClass .
const container = document.querySelector(".container"); Array.from(container.children).forEach((c, i) => { if (c.className.includes("myClass")) { console.log(i + 1); } }); <div class="container"> <div class="container__item"></div> <div class="container__item myClass"></div> <div class="container__item"></div> <div class="container__item myClass"></div> <div class="container__item"></div> <div class="container__item"></div> <div class="container__item myClass"></div> </div>También puede hacerlo usando Element.classList , como se muestra a continuación:
const container = document.querySelector(".container"); Array.from(container.children).forEach((c, i) => { if (c.classList.contains("myClass")) { console.log(i + 1); } }); <div class="container"> <div class="container__item"></div> <div class="container__item myClass"></div> <div class="container__item"></div> <div class="container__item myClass"></div> <div class="container__item"></div> <div class="container__item"></div> <div class="container__item myClass"></div> </div>Puede usar el mapa y luego filtrar la lista de elementos:
const myClassElementsWithIndexes = [...document.querySelectorAll(`.container .container__item`)] .map( (item, i) => ({elem: item, index: i}) ) .filter(item => item.elem.classList.contains(`myClass`) ); console.log(myClassElementsWithIndexes); <div class="container"> <div class="container__item"></div> <div class="container__item"></div> <div class="container__item myClass"></div> </div>Está iterando sobre el item en lugar de items en su bucle for. Agregué algunos ID solo para la depuración para mostrarles. También te falta un punto después del índice [i] antes de acceder a classList.
let items = document.querySelectorAll(".container__item"); for ( var i = 0; i < items.length; i++) { console.log( items[i].id ); var hasClass = items[i].classList.contains('myClass'); if (hasClass) { console.log('Index: ' + i); } } <div class="container"> <div class="container__item" id="div1"></div> <div class="container__item" id="div2"></div> <div class="container__item myClass" id="div3"></div> </div>