Tengo un cuadro de entrada en el que puedo ingresar texto, presiono enter y devuelve ese texto en una lista. Sin embargo, quiero que devuelva cada tercer elemento azul. ¿Cómo puedo hacer esto? Ahora mismo solo tengo:
if(document.getElementById('item').value % 3 == 0) { color: red; }Usando CSS:
#item:nth-child(3) { color: #ccc; }Aplíquelo a cada tercer elemento:
#item:nth-child(3n) { color: #ccc; }Considere usar clases en lugar de id.
Suponiendo que su lista es un elemento UL, puede filtrar todos los elementos y extraer solo cada tercer elemento y cambiar su color:
const every_nth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1); every_nth([...document.getElementById("items").children], 3).map((e)=> e.style.color = 'blue'); li { color: red; } <ul id="items"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul>