检查当前元素是偶数还是奇数 [英] Check if current element is even or odd

问题描述

是否有一种简单的方法来检查nodeList中的当前元素是否为其父元素的偶数/奇数子元素.

Is there an easy way to check whether the current element in a nodeList is an even/odd child of its parent.

例如，如果有链接列表.

For example, if have a list of links.

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

然后像这样遍历一个nodeList:

And I iterate over a nodeList like this:

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

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

How would I determine if the current link is even or odd?

我当时正在考虑使用父级上的li:nth-child(odd)为所有父级的所有奇数li元素选择一个新的nodeList，然后检查当前节点是否在该nodeList中.尽管我不确定该怎么做.

I was thinking of selecting a new nodeList of all the parent's odd li elements using li:nth-child(odd) on the parent and then checking whether the current node is in that nodeList. Although I'm not sure how to do that exactly.

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

How can I check whether the current node is even/odd in relation to its parent?

推荐答案

此问题类似于

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

How can I check whether the current node is even/odd in relation to its parent?

与其他所有答案一样，每次迭代仅递增i的问题是，此计算与父节点无关.如果您注意到，现有的答案都根本不会使用link.parentNode！

The problem with simply incrementing i on every iteration, as all the other answers are doing, is that this calculation makes no relation to the parent node whatsoever. If you notice, none of the existing answers make use of link.parentNode at all!

由于计算不了解父节点的上下文，因此它基本上假定存在一个ul元素，并且所有li元素都是该ul的子元素，才能正常工作.在同一文档中嵌套ul元素或什至只是多个ul元素的那一刻，它就会崩溃.

Since the calculation isn't aware of the context of the parent node, it basically assumes there is exactly one ul element and all li elements are children of that one ul in order to work correctly. The moment you have nested ul elements or even just multiple ul elements in the same document, it will break.

请注意，%行的问题不是 .实际上，这正是您确定整数是偶数还是奇数的方式.问题在于索引没有相对于父节点进行计算.

Note that the problem is not with the % line. In fact, that is exactly how you determine if an integer is even or odd. The problem is that the index isn't being calculated in relation to the parent node.

例如，如果我修改您的列表，使其包含嵌套的ul和一个li:

For example, if I modify your list to include a nested ul with exactly one li:

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

一旦计算内部li(第二行)，输出将是全部错误. :

The output will be all wrong once it counts the inner li (the second line):

[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中编写了脚本到我上面链接的类似问题.这是一个报价:

I wrote a script in an answer to the similar question I linked to above. Here's a quote:

一种更安全的方法是遍历每个元素的父节点的子节点，为作为元素节点的每个子节点增加一个计数器(因为:nth-child()仅对元素节点进行计数):

One way to achieve this that is more foolproof is to loop through the child nodes of each element's parent node, incrementing a counter for each child node that is an element node (since :nth-child() only counts element nodes):

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

And here's the script, adapted for your use case:

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

现在输出将是正确的:

[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

同样，第二行代表内部li，在修改的HTML中，它是其父ul的第一个(因此是奇数)子代.

Again, the second line represents the inner li, which in the modified HTML is the first (and therefore odd) child of its parent ul.

这篇关于检查当前元素是偶数还是奇数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！