6 svar
502 visningar
g4l3n 144 – Fd. Medlem
Postad: 11 dec 2019 17:33

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 Online 30472
Postad: 11 dec 2019 20:03

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 144 – Fd. Medlem
Postad: 11 dec 2019 22:49
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 Online 30472
Postad: 12 dec 2019 06:48 Redigerad: 12 dec 2019 06:49

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 144 – Fd. Medlem
Postad: 12 dec 2019 15:21
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 15 – Fd. Medlem
Postad: 15 jun 2020 15:04

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 15 – Fd. Medlem
Postad: 15 jun 2020 15:13

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
Close