6 svar
123 visningar
g4l3n 150
Postad: 11 dec 2019

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++){

}

Laguna 13329
Postad: 11 dec 2019

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

g4l3n 150
Postad: 11 dec 2019
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?

Laguna 13329
Postad: 12 dec 2019 Redigerad: 12 dec 2019

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){
...

}

g4l3n 150
Postad: 12 dec 2019
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!

Ironboy 19
Postad: 15 jun 2020

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}

Ironboy 19
Postad: 15 jun 2020

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 - 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);

Svara Avbryt
Close