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

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:nth-child(odd) 选择所有父级奇数li 元素的新节点列表，然后检查当前节点是否在该节点列表中。虽然我不确定该怎么做。

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

Answer 1

这个问题类似于Get an element's nth-child number in pure JavaScript

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

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

由于计算不知道父节点的上下文，它基本上假设只有一个ul 元素并且所有li 元素都是那个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>

一旦计算内部li（第二行），输出将是all wrong：

[12:07:25.505]奇数 [12:07:25.505] 甚至 [12:07:25.505]奇数 [12:07:25.505] 甚至 [12:07:25.506]奇数 [12:07:25.506] 甚至

我在answer 中为上面链接到的类似问题编写了一个脚本。这是一个报价：

实现这一点的一种更简单的方法是循环遍历每个元素的父节点的子节点，为作为元素节点的每个子节点递增一个计数器（因为:nth-child() 只计算元素节点）：

这是适合您的用例的脚本：

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");
   }
}

现在输出将是correct:

[12:35:22.273]奇数 [12:35:22.273]奇数 [12:35:22.273] 甚至 [12:35:22.273]奇数 [12:35:22.273] 甚至 [12:35:22.273]奇数

同样，第二行代表内部 li，在修改后的 HTML 中，它是其父 ul 的第一个（因此是奇数的）子级。

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");
   }