选择相同类型元素的每个第n个，但不在同一个父元素中

Question

我怎样才能在页面上抓取某个类型（a）的每个元素，无论它们是否在父容器中，并在每第n次迭代中添加某个类？

我正在尝试按顺序循环显示5种不同颜色的所有链接。所以每5n + 0链接为蓝色，每5n + 1为红色，依此类推。阻止我使用css nth-childs的问题是它们主要包含在不同的段落中，并且都被认为是在5n + 0以下。

我（想）我知道从document.querySelectorAll("a")开始，但不是从那里做什么....

Answer 1

您可以使用.each()进行迭代，然后相应地将颜色/类添加到索引（第n个元素）

$('a').each(function(index, element){
  switch(index%5){
    case 0:
        $(element).addClass('blueColor');
        break;
    case 1:
        $(element).addClass('redColor');
        break;
    default:
    //Whatever    
  }
});

Fiddle:

Answer 2

将所有链接收集到一个数组中：

let linx = Array.from(document.links);

运行for循环并从颜色数组中指定颜色，请参阅演示

---

演示

let colors = ['cyan', 'lime', 'tomato', 'gold', 'violet'];

let linx = Array.from(document.links);

let count = 0;

for (let c = 0; c < linx.length; c++) {
  count++;
  if (count === 5) {
    count = 0;
  } 
  linx[c].style.color = colors[count];
}

<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>
<a href='#/'>LINK</a>