How to make this repeat loop 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 it only does the intermediaries.
You are changing the color in every iteration of the loop, but only need to change when it is a multiple of 5.
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> What the code does is turn red if the position is multiple of 5 and blue otherwise. To make the change from 5 to 5 you 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 an array of colors:
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> Since you've included the tag css then my suggestion is make use of this by using the :nth-child(...) selector, similar to what Sveen did. .
However I think you need an explanation, I made an example of 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> First of all I have to say that in this application you will not even have to iterate, you will notice that you do not need for , join already solved:
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 to the previous element in 2 positions (-2) to the fifth element of each cycle 5n-3 will apply the effect a to the previous element in 3 positions (-3) to the fifth element of each cycle 5n-4 will apply the effect a to the previous element in 4 positions (-4) to the fifth element of each cycle In this way you will apply to every 5 elements and every 4 elements previous to each 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 very similar, however the count starts from 10, that is, 10 out of 10 elements, and then comes applying the style to the 4 elements before each of the tenth elements.
You can do this 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: link