Как по клику добавлять класс следующим 4 элементам??

Question

[Proroks]

Есть условная разметка

<wrapper>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
</wrapper>
<button>Click</button>

Как сделать что бы по клику на кнопку добавлялся класс трём первым элементам, и при последующих кликах добавлял класс следующим трём элементам и так далее. Буду очень признателен за помошь!

Answer 1

[0xD34F]

$('селектор кнопки').click(function() {
  $('селектор-элементов')
    .not('.класс')
    .slice(0, количествоЭлементовКоторымНадоДобавитьКласс)
    .addClass('класс');
});

или

const items = [...document.querySelectorAll('селектор элементов')];

document.querySelector('селектор кнопки').addEventListener('click', () => {
  items
    .splice(0, количествоЭлементовКоторымНадоДобавитьКласс)
    .forEach(n => n.classList.add('класс'));
});