How to individually select < li > and then use modulus to select the odd ones

Question

ALright so I got a homework from my teacher to first select every individual < li > and then use modulus to select only the odd ones and change their color. And I have to say that I am completely stumped.

I have tried selecting using child nodes: var listaOne = document.getElementById ("lista1").childNodes[0];

HTML

<ul id="lista1">
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4</li>
                <li>List item 5</li>
            </ul>

JS

    listaOne = document.getElementById ("lista1").childNodes[0];
listaTwo = document.getElementById ("lista1").childNodes[1];
listaThree = document.getElementById ("lista1").childNodes[2];
listaFour = document.getElementById ("lista1").childNodes[3];
listaFive = document.getElementById ("lista1").childNodes[4];

I want to be able to choose an < li > individually

It's `.childNodes` (plural) not `.childNode` (singular) -> https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes — Andreas, Jun 24 '19 at 18:24
Welcome to SO! Any time in code you find yourself doing `thing1`, `thing2`...`thingN`. Please don't type that all out--use an [array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and a [loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration). Use the above link and the mod operator when iterating through the collection to determine parity (`n % 2 === 0`). — ggorlen, Jun 24 '19 at 18:27

score 0 · Answer 1 · answered Jun 24 '19 at 18:32

You can use document.querySelectorAll to get the array of li.

var lis = document.querySelectorAll('#lista1 li');
for (var i = 0; i < lis.length; i++) {
  lis[i].style.color = 'blue';
}

var oddLis = document.querySelectorAll('#lista1 li:nth-child(odd)');
for (var i = 0; i < oddLis.length; i++) {
  oddLis[i].style.color = 'red';
}

<ul id="lista1">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

_"and then **use modulus** to select only the odd ones"_ – Andreas Jun 24 '19 at 19:03 — Andreas, Jun 24 '19 at 19:03

score 0 · Answer 2 · answered Jun 24 '19 at 18:33

0

You can use querySelectorAll to select all li elements. Then filter the odd ones using the filter provided by Array. Then you have yourself an array of li elements.

Here, I'm using the spread operator to convert the NodeList returned by querySelectorAll into an Array.

const lis = [...document.querySelectorAll('#lista1 > li')];

lis.filter((li, i) => i % 2).forEach(li => li.style.color = 'red');

<ul id="lista1">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

answered Jun 24 '19 at 18:33

Ivan

34,531
8
55
100

Or even better as Samuel used it, a nice CSS selector coupled with the native [`NodeList#forEach`](https://developer.mozilla.org/fr/docs/Web/API/NodeList/forEach): `document.querySelectorAll('#lista1 li:nth-child(even)').forEach(li => li.style.color = 'red');` – Ivan Jun 24 '19 at 18:39
_"and then **use modulus** to select only the odd ones"_ – Andreas Jun 24 '19 at 19:03

score 0 · Answer 3 · answered Jun 24 '19 at 18:39

Depending on how you want to do it, a forEach loop would package up the code necessary should you select every element.

var nodeList = document.getElementById('parent').childNodes;

nodeList.forEach((node, index) => {
    if (index % 2 === 0) {
        // code for evens here
    } else {
        // code for odds here
    }
});

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

How to individually select < li > and then use modulus to select the odd ones

3 Answers3