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>

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

2 个答案:

演示