Question

是否有一种简单的方法可以检查nodeList中的当前元素是否是其父级的偶数/奇数子元素。

例如，如果有一个链接列表。

<ul>
 <li>Odd</li>
 <li>Even</li>
 <li>Odd</li>
 <li>Even</li>
 <li>Odd</li>
</ul>

我迭代一个nodeList，如下所示：

var links = document.querySelectorAll("ul li");

for (i = 0; i < links.length; i++) {
   var link = links[i];
   var parent = link.parentNode;

   if (// this is an even link) {
      console.log("even");
   }
   else {
      console.log("odd");
   }
}

如何确定当前链接是偶数还是奇数？

我正在考虑在父节点上使用li选择所有父奇数li:nth-child(odd)元素的新nodeList，然后检查当前节点是否在该节点列表中。虽然我不确定该怎么做。

如何检查当前节点相对于其父节点是偶数/奇数？

Answer 1

此问题与Get an element's nth-child number in pure JavaScript

类似

如何检查当前节点相对于其父节点是偶数/奇数？

正如所有其他答案所做的那样，简单地在每次迭代中递增i的问题是，此计算与父节点无关。如果您注意到，现有的答案都没有使用link.parentNode！

由于计算不了解父节点的上下文，因此它基本上假设只有一个ul元素，而所有li元素都是该元素的子元素{{1}为了正常工作。当您在同一文档中嵌套ul个元素或甚至只有多个ul元素时，它就会中断。

请注意，ul行的问题是不。实际上，这正是您确定整数是偶数还是奇数的方式。问题是索引不是根据父节点计算的。

例如，如果我修改您的列表以包含一个只有%的嵌套ul：

li

一旦计算内部<ul> <li>Odd <ul> <li>Odd</li> </ul> </li> <li>Even</li> <li>Odd</li> <li>Even</li> <li>Odd</li> </ul>（第二行），输出将为all wrong：

[12:07:25.505] odd
[12:07:25.505] even
[12:07:25.505] odd
[12:07:25.505] even
[12:07:25.506] odd
[12:07:25.506] even

我在answer中写了一个脚本来解决我上面提到的类似问题。这是一个引用：

实现此目的更简单的一种方法是循环遍历每个元素的父节点的子节点，为每个作为元素节点的子节点递增计数器（因为li仅计数元素节点）：

这是适合您用例的脚本：

:nth-child()

现在输出将是correct：

[12:35:22.273] odd
[12:35:22.273] odd
[12:35:22.273] even
[12:35:22.273] odd
[12:35:22.273] even
[12:35:22.273] odd

同样，第二行代表内部var links = document.querySelectorAll("ul li"); for (var i = 0; i < links.length; i++) { var link = links[i]; var parent = link.parentNode; var child = parent.firstChild; var index = 0; while (true) { if (child.nodeType === Node.ELEMENT_NODE) { index++; } if (child === link || !child.nextSibling) { break; } child = child.nextSibling; } if (index % 2 == 0) { console.log("even"); } else { console.log("odd"); } }，它在修改后的HTML中是其父li的第一个（因而也是奇数）子项。

Answer 2

只需检查i+1是偶数还是奇数

for (i = 0; i < links.length; i++) {
   var link = links[i];
   var parent = link.parentNode;

   if ((i+1)%2 == 0) {
      console.log("even");
   }
   else {
      console.log("odd");
   }
}

Answer 3

使用modulo operator：

if ((i+1)%2==0) {
      console.log("even");
   }
   else {
      console.log("odd");
   }

检查当前元素是偶数还是奇数

3 个答案: