Repeat zebra style color only 5 by 5

Question

How to make this loop repeat to have 5 numbers of one color and 5 numbers of another color?

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var  html='';
for (var i in collection) {
  var cor = (i % 5 == 0) ? 'red' : 'blue';
   html+='<div style="color: '+cor+'">'+collection[i]+'</div>';

}
document.getElementById('data').innerHTML = html;

In the example in this fiddle he only makes the middlemen.

Answer 1

You are changing the color in every loop iteration, but only need to change when it is multiple of 5. One condition is missing.

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var cor = 'blue';
var  html='';
for (var i in collection) {
   if(i % 5 == 0) {
       cor = cor === 'blue' ? 'red' : 'blue';
   }
   html+='<div style="color: '+cor+'">'+collection[i]+'</div>';

}
document.getElementById('data').innerHTML = html;

<div id="data"></div>

Answer 2

What the code does is it turns red if the position is multiple of 5 and blue otherwise. To make the exchange of 5 in 5 can define an initial color, and at each multiple position of 5 change the color in which it goes.

Example:

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var  html='';
var cor = 'red'; //inicia com red
for (var i in collection) {
   if (i % 5 == 0 && i != 0) { //se multiplo de 5
       cor = cor == 'red' ? 'blue' : 'red'; // alterna a cor
   }
   html+='<div style="color: '+cor+'">'+collection[i]+'</div>';

}
document.getElementById('data').innerHTML = html;

<div id="data"></div>

You can even apply more colors if you use a solution based on a color array:

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var html='';
var cores = ['red','blue','green']; //cores disponiveis
var corCorrente = 0;
for (var i in collection) {
   if (i % 5 == 0 && i != 0) { 
       //aumentar cor corrente e se passar o limite volta a 0
       corCorrente = (corCorrente + 1) % collection.length;
   }
   html+='<div style="color: '+cores[corCorrente]+'">'+collection[i]+'</div>';
}
document.getElementById('data').innerHTML = html;

<div id="data"></div>

Answer 3

Since you included the tag css then my suggestion is that you take advantage of this by using the selector :nth-child(...), similar to what Sveen fez.

However I think you need an explanation, I made an example in a simpler way (from my point of view) to be able to modify

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var  html = '<div>' + collection.join('</div><div>') + '</div>';

document.getElementById('data').innerHTML = html;

#data > div:nth-child(5n),
#data > div:nth-child(5n-1),
#data > div:nth-child(5n-2),
#data > div:nth-child(5n-3),
#data > div:nth-child(5n-4) {
    color: red;
}

#data > div:nth-child(10n),
#data > div:nth-child(10n-1),
#data > div:nth-child(10n-2),
#data > div:nth-child(10n-3),
#data > div:nth-child(10n-4) {
    color: blue;
}

<div id="data"></div>

---

Explanation about the use of Nth-Child

First I must say that in this use you will not even need to iterate, note that it is not necessary for, the join has already resolved:

var html = '<div>' + collection.join('</div><div>') + '</div>';

Now about CSS, this first:

#data > div:nth-child(5n),
#data > div:nth-child(5n-1),
#data > div:nth-child(5n-2),
#data > div:nth-child(5n-3),
#data > div:nth-child(5n-4)

Note that:

• 5n will apply the effect to every 5 elements
• 5n-1 will apply the effect a on the previous element (-1) to the fifth element of each cycle
• 5n-2 will apply the effect a on the previous element in 2 positions (-2) to the fifth element of each cycle
• 5n-3 will apply the effect a on the previous element in 3 positions (-3) to the fifth element of each cycle
• 5n-4 will apply the effect a on the previous element in 4 positions (-4) to the fifth element of each cycle

In this way it will apply to each 5 elements and to each 4 elements prior to cda one of these

Now this:

#data > div:nth-child(10n),
#data > div:nth-child(10n-1),
#data > div:nth-child(10n-2),
#data > div:nth-child(10n-3),
#data > div:nth-child(10n-4) {
    color: blue;
}

This is quite similar, however the count starts from the 10, ie 10 in 10 elements, and then has been applying the style to the 4 elements prior to each of the tenth elements.

Answer 4

You can do it using only css with Nth-Child

var collection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var  html='';
for (var i in collection) {
    html+='<div>'+collection[i]+'</div>';
}
document.getElementById('data').innerHTML = html;

#data > div{
   font-weight: bold;
   text-align: center;
}

#data > div:nth-child(11n - 5),#data > div:nth-child(11n - 4),#data > div:nth-child(11n - 3), #data > div:nth-child(11n - 2), #data > div:nth-child(11n - 1){
  background: red;
  color: white;
}

#data > div:nth-child(11n - 11),#data > div:nth-child(11n - 10),#data > div:nth-child(11n - 9),#data > div:nth-child(11n - 8), #data > div:nth-child(11n - 7), #data > div:nth-child(11n - 6){
  background: blue;
  color: white;
}

<div id="data"></div>

Source: https://stackoverflow.com/questions/35551936/css3-nth-child-repeat-range-every-5-elements/35552293