Descripción
Actualmente estoy tratando de usar el operador de módulo en JavaScript, para apuntar a una lista HTML específica y hacer que los elementos allí que son impares tengan el color X y los que son pares tengan el color Y.
function newFunction() { var items = document.getElementById("oddEven"); var index = items.querySelectorAll("li"); console.log(index); for (var i = 0; i < items.length; i++) { console.log(i); console.log(items[i]); if (i % 2 == 1) { document.getElementById("oddEven").style.color = "orange"; } else { document.getElementById("oddEven").style.color = "blue"; } } } newFunction(); <ul id="oddEven"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>Errores Ninguno en JSlint, IDE VS CODE, Console.
Intentos He buscado temas similares con respecto al módulo que hay un montón, pero la mayoría de ellos tienden a ser sobre colores de fondo para elementos completamente diferentes. Incluso cuando he replicado el código de otros y simplemente editado los elementos específicos, simplemente no puedo hacer que funcione.
Pregunta ¿Es que estoy usando mal el bucle for aquí? ¿O el módulo está completamente apagado? Pensé en el documento "if" y "else".getX, tal vez eso se usa mal ...
¿Hay alguien que pueda darme una nueva idea de dónde está mal mi código, o simplemente una pista?
En lugar de configurar item.style.color , sería mejor agregar una clase al elemento de la lista, como item.classList.add('odd'); (o 'par') y li.odd y li.even como quieras.
const oddEvenClasses = [ 'even', 'odd' ]; function newFunction() { var items = document.getElementById("oddEven").querySelectorAll("li"); for (var i = 0; i < items.length; i++) { items[i].classList.add(oddEvenClasses[(i+1) % 2]); } } newFunction(); li.even { color: orange; } li.odd { color: blue; } <ul id="oddEven"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> Por supuesto, también podría hacerlo con CSS puro y sin necesidad de JS, usando un selector de CSS li con nth-of-type
ul.oddEven li:nth-of-type(2n) { color: orange; } ul.oddEven li:nth-of-type(2n+1) { color: blue; } <ul class="oddEven"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>Un par de cosas...
index habría funcionado en el ciclo, pero ni siquiera se estaba usando, así que lo eliminé. He combinado los dos con el encadenamiento de métodos. Puede simplificar aún más con document.querySelectorAll('#oddEven li') . function newFunction() { var items = document.getElementById("oddEven").querySelectorAll("li"); for (var i = 0; i < items.length; i++) { if (i % 2 == 1) { items[i].style.color = "orange"; } else { items[i].style.color = "blue"; } } } newFunction(); <ul id="oddEven"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>Agregando una alternativa, itera a través de una NodeList con .forEach() y usa operadores ternarios:
node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd;El valor del nodo actual (elemento) es el color de los números pares SI el índice es 0 O el índice se puede dividir por 2 de manera uniforme DE OTRO MODO, es el color de los números impares.
const items = document.querySelectorAll("li"); function stripes(nodeList, colorOdd, colorEven) { nodeList.forEach((node, index) => { node.style.color = index === 0 || index % 2 === 0 ? colorEven : colorOdd; }); } stripes(items, 'orange', 'blue'); <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>