如何单独选择<li>然后使用模数选择奇数

Question

好吧，所以我从老师那里得到了一个作业，首先选择每个个体 < li > 然后使用模数只选择奇数并改变它们的颜色。我不得不说我完全被难住了。

我尝试使用子节点进行选择：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];

我希望能够单独选择一个 < li >

Answer 1

您可以使用querySelectorAll来选择所有li元素。然后使用filter提供的过滤奇数Array。然后你有自己的li元素数组。在这里，我使用扩展运算符将NodeList返回的 byquerySelectorAll转换为Array.const lis = [...document.querySelectorAll('#lista1 > li')];lis.filter((li, i) => i % 2).forEach(li => li.style.color = 'red');<ul id="lista1">&nbsp; <li>List item 1</li>&nbsp; <li>List item 2</li>&nbsp; <li>List item 3</li>&nbsp; <li>List item 4</li>&nbsp; <li>List item 5</li></ul>

Answer 2

您可以使用document.querySelectorAll来获取li.var lis = document.querySelectorAll('#lista1 li');for (var i = 0; i < lis.length; i++) {&nbsp; lis[i].style.color = 'blue';}var oddLis = document.querySelectorAll('#lista1 li:nth-child(odd)');for (var i = 0; i < oddLis.length; i++) {&nbsp; oddLis[i].style.color = 'red';}<ul id="lista1">&nbsp; &nbsp; <li>List item 1</li>&nbsp; &nbsp; <li>List item 2</li>&nbsp; &nbsp; <li>List item 3</li>&nbsp; &nbsp; <li>List item 4</li>&nbsp; &nbsp; <li>List item 5</li></ul>