Använda modulus % till att ändra färg på ojämna <li> element
Hej!
Har fastnat på en uppgift där jag ska använda modulus % som jag inte tidigare har använt.
Är det någon som kan förklara eller visa ett exempel på hur jag kan göra?
Jag har kommit såhär långt med vet inte vart jag ska få in modulus % för sätta färg på det ojämna elementen.
var el = document.getElementById('lista1'); //skapar en variabel för listan
var lista = el.querySelectorAll('li'); //samlar alla li element från lista1
console.log(lista); //ser alla li element i lista1
for (var i = 0; i < el.lenght; i++){
}
Ska du hoppa över vartannat element, alltså?
% funkar så här, med några exempel:
1%3 = 1, 2%3 = 2, 3%3 = 0, 4%3 = 1
1%2 = 1, 2%2 = 0, 3%2 = 1, 4%2 = 0
Laguna skrev:Ska du hoppa över vartannat element, alltså?
% funkar så här, med några exempel:
1%3 = 1, 2%3 = 2, 3%3 = 0, 4%3 = 1
1%2 = 1, 2%2 = 0, 3%2 = 1, 4%2 = 0
Ja precis, alltså dem ojämna 1,3,5 osv ska ha få en annan färg med style attributet.
Okej men lägger man in det i for loopen eller hur använder man den?
for (var i = 0; i < el.length; i++){
if (i % 2 == 1) {
// gör nåt udda
}
}
Ett alternativ är att bara räkna fram de udda i:
for (var i = 1; i < el.length; i += 2){
...
}
Laguna skrev:for (var i = 0; i < el.length; i++){
if (i % 2 == 1) {
// gör nåt udda
}
}Ett alternativ är att bara räkna fram de udda i:
for (var i = 1; i < el.length; i += 2){
...}
Tack ska testa det!
Att använda JavaScript och/eller css-klasser för att ge olika färg på jämna och udda element är MYCKET onödigt, då detta går att göra men ren CSS, i nedanstående exempel får udda li-taggar i <ul class="minLista"> textfärgen grönt och jämna textfärgen blått:
ul.minLista li {color:blue}
ul.minLista li:nth-child(even){color: green}
MEN: Om du vill använda JavaScript TROTS att detta är onödigt går det förstås bra, och du kan använda modulus-operatorn som andra har nämnt, lämpligen tillsammans med en ternary-operator:
Här skapar jag en lista där udda li-element är gröna och jämna...
(Notera: 0 betraktas som falsey och alla andra tal som truthy i JS, samt i - indexsvärdet för det första elementet som "grafiskt är udda" är 0)
let cats = 'Pelle,Gustav,Måns,Maja,Fritz'.split(',');
let ul = document.createElement('ul');
ul.innerHTML = cats.map((cat, i) => `
<li style="color:${i % 2 ? 'blue' : 'green'}">${cat}</li>
`).join('');
document.body.append(ul);
