如何单独选择<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">

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

Answer 2

您可以使用document.querySelectorAll来获取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>