¿Cómo aplico el mismo estilo a todos los elementos con un incremento de +4? Por ejemplo, todos los elementos 1, 5, 9, 13, 17 de la matriz, etc., tienen el mismo estilo. Todos los elementos 2, 6, 10, 14 y así sucesivamente... de la matriz tienen el mismo estilo. Todos los elementos 3, 7, 11, 15 e hijos de la matriz tienen el mismo estilo. Todos los elementos 4, 8, 12, 16 y así sucesivamente... de la matriz tienen el mismo estilo.
Para lograr esto es en CSS, algo como esto funcionaría:
.list-item { &:first-child::before { border: 1px solid $green; } &:nth-child(2)::before { border: 1px solid $blue; } &:nth-child(3)::before { border: 1px solid $orange; } &:nth-child(4)::before { border: 1px solid $red; } &:nth-child(4n+5)::before { border: 1px solid $green; } &:nth-child(4n+6)::before { border: 1px solid $blue; } &:nth-child(4n+7)::before { border: 1px solid $orange; } &:nth-child(4n+8)::before { border: 1px solid $red; } }¿Cómo logro esto en JavaScript y React para ser específico?
Gracias.
En CSS :
nth-child(4n + 1) : 1st, 5th, 9th, etc...nth-child(4n + 2) 2nd, 6th, 10th, etc...nth-child(4n + 3) 3rd, 7th, 11th, etc...nth-child(4n) 4th, 8th, 12th, etc...Véalo funcionando:
p:nth-child(4n + 1) { color: red; } <div> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div>En JavaScript :
arr.filter((_, key) => !(key % 4)) // 1st, 5th, 9th... arr.filter((_, key) => key % 4 === 1) // 2nd, 6th, 9th... arr.filter((_, key) => key % 4 === 2) // 3rd, 7th, 10th... arr.filter((_, key) => key % 4 === 3) // 4th, 8th, 12th... const arr = [...Array(13).keys()].slice(1) console.log({ '4n': arr.filter((_,key) => key % 4 === 3), '4n + 1': arr.filter((_,key) => key % 4 === 0), '4n + 2': arr.filter((_,key) => key % 4 === 1), '4n + 3': arr.filter((_,key) => key % 4 === 2), arr })__
Así que finalmente lo descubrí usando el módulo:
Por ejemplo:
for (let i = 1; i <= 100; i++) { if (i % 4 === 1) { console.log(`Should be 1, 5, 9, 13, 17: ${i}`); } if (i % 4 === 2) { console.log(`Should be 2, 6, 10, 14, 18: ${i}`); } if (i % 4 === 3) { console.log(`Should be 3, 7, 11, 15, 19: ${i}`); } if (i % 4 === 0) { console.log(`Should be 4, 8, 12, 16, 20: ${i}`); } }