Выбор каждого n-го элемента того же типа, но не в пределах одного и того же родителя

Question

Как я могу получить каждый элемент определенного типа (a) на странице, независимо от того, находится ли он в родительском контейнере или нет, и добавить определенный класс к каждой n-й итерации?

Я пытаюсь перебрать все мои ссылки по 5 разным цветам по порядку.Таким образом, каждая ссылка 5n + 0 синяя, каждая 5n + 1 красная, и так далее.Проблема, мешающая мне использовать css nth-childs, заключается в том, что они в основном содержатся в разных абзацах и рассматриваются как 5n + 0.

Я (думаю), я знаю, чтобы начать с document.querySelectorAll("a"), но не то, что делать оттуда ....

Answer 1

Соберите все ссылки в массив:

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>

Answer 2

Вы можете выполнить итерацию с .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: