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

Question

我该如何抓住页面上某个类型（a）的每个元素，而不管它们是否在父容器中，并在第n次迭代中添加某个类？

我试图按顺序通过5种不同的颜色循环显示所有链接。 因此，每个5n + 0链接为蓝色，每个5n + 1链接为红色，依此类推。 使我无法使用css nth-childs的问题是它们大多包含在不同的段落中，并且都被认为在5n + 0以下。

我（认为）我知道从document.querySelectorAll("a") ，但不知道从那里开始。

Answer 1

您可以使用.each()进行迭代，然后将颜色/类相应地添加到index（ nth element ）

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

小提琴：

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>