Estoy tratando de obtener elementos pares (div) y darles diferentes nombres de clase en comparación con los elementos impares (div) en los que también tendrán diferentes nombres de clase , quiero escribir dentro de la función querySelectorAll () para obtener incluso (. proyecto) clase y para obtener una clase impar (.proyecto) sin proporcionar un índice como [0], [1],...etc. ¿Hay alguna manera de hacer algo así? aquí está el código para la explicación.
aquí está el código original:
document.querySelectorAll('.project')[0].classList.add('EvenProject'); document.querySelectorAll('.project')[1].classList.add('OddProject'); document.querySelectorAll('.project')[2].classList.add('EvenProject');esto es lo que quiero implementar:
document.querySelectorAll('.project:even').classList.add('EvenProject'); document.querySelectorAll('.project:odd').classList.add('OddProject');También probé este código, por querySelector(), pero no funciona.
document.querySelector('.project:even').classList.add('EvenProject');Gracias por tu ayuda.
const projects = document.querySelectorAll('.project'); projects.forEach((el, i) => { if (i % 2 === 0) { el.classList.add('red') } else { el.classList.add('yellow') } }) .project { width: 40px; height: 40px; background: gray; display: inline-block; margin: 5px; } .red { background: red; } .yellow { background: yellow; } <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div>Solo sería posible si hay un componente principal para todos los .project s cuyos hijos se pueden seleccionar con nth-child(even) o nth-child(odd) , por ejemplo, con
<div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> </div>entonces podrías hacer
for (const project of document.querySelectorAll('.project:nth-child(even)') { project.classList.add('EvenProject'); } for (const project of document.querySelectorAll('.project:nth-child(odd)') { project.classList.add('OddProject'); }O si el HTML es como
<div> <div> <div class="project"></div> </div> <div> <div class="project"></div> </div> <div> <div class="project"></div> </div> <div> <div class="project"></div> </div> </div> podría hacer lo mismo con el selector :nth-child(even) > .project . Pero no todos los diseños posibles de los .project s se pueden seleccionar con una sola cadena de selector como usted desea; es posible que deba iterar sobre los índices pares e impares de la colección manualmente y agregar el índice apropiado a cada uno.
NOTA: Esta respuesta asume que todos los elementos .project son todos hijos del mismo padre.
Puede usar document.querySelectorAll('.project:nth-child(even)') , ver REGLAS PAR E IMPAR pero puede hacer lo mismo puramente en CSS:
.project { width: 100%; height: 1em; background-color: black; } .project:nth-child(even) { background-color: blue; } .project:nth-child(odd) { background-color: green; } <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div> <div class="project"></div>