如何单独选择<li>，然后使用模数选择奇数[重复]答案

【问题标题】：How to individually select < li > and then use modulus to select the odd ones [duplicate]如何单独选择<li>，然后使用模数选择奇数[重复]
【发布时间】：2019-06-25 02:39:53
【问题描述】：

好吧，所以我从老师那里得到了一个作业，首先选择每个人

，然后使用模数只选择奇数并改变它们的颜色。我不得不说我完全被难住了。

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

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

我希望能够单独选择一个

【问题讨论】：

这是.childNodes（复数）而不是.childNode（单数）-> developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
欢迎来到 SO！任何时候在代码中你都会发现自己在做thing1、thing2...thingN。请不要全部输入 - 使用 array 和 loop。在遍历集合以确定奇偶校验 (n % 2 === 0) 时，使用上述链接和 mod 运算符。

标签： javascript dom modulus

【解决方案1】：

您可以使用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>

【讨论】：

"然后使用模数只选择奇数"

【解决方案2】：

您可以使用querySelectorAll 选择所有li 元素。然后使用Array 提供的filter 过滤奇数。然后你有一个li元素数组。

在这里，我使用扩展运算符将querySelectorAll 返回的NodeList 转换为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>

【讨论】：

或者像 Samuel 使用的那样更好，一个不错的 CSS 选择器加上原生的 NodeList#forEach:document.querySelectorAll('#lista1 li:nth-child(even)').forEach(li => li.style.color = 'red');
"然后使用模数只选择奇数"

【解决方案3】：

根据您的操作方式，如果您选择每个元素，forEach 循环会打包必要的代码。

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

【讨论】：