@klekovkinandrey

Как добавить класс всем блокам, которые выводятся после 3го блока?

Как добавить класс всем блокам, которые выводятся после 3го блока?
Вот к примеру, после 3го блока всем остальным должен подставляться класс green:

<div class="container">
  <div class="service">1</div>
  <div class="service">2</div>
  <div class="service">3</div>
  <div class="service">4</div>
  <div class="service">5</div>
  <div class="service">6</div>
  <div class="service">7</div>
</div>

.container .service{
  border:1px solid red;
  margin:5px;
  padding:5px;
}
.container .green{border:1px solid green; }
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Где элементы находятся, какой класс надо добавить и начиная с какого по счёту элемента:

const parent = document.querySelector('.container');
const className = 'green';
const startFrom = 4;

Добавляем:

parent
  .querySelectorAll(`:nth-child(n + ${startFrom + 1})`)
  .forEach(n => n.classList.add(className));

// или

for (const n of Array.prototype.slice.call(parent.children, startFrom)) {
  n.classList.add(className);
}

// или

for (let el = parent.children[startFrom]; el; el = el.nextElementSibling) {
  el.classList.add(className);
}

// или

for (let i = 0; i < parent.children.length; i++) {
  parent.children[i].classList.toggle(className, i >= startFrom);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Просто стилями можно:
.container div:nth-child(n + 4){
  border:1px solid green;
  background-color:lightgreen;
}

spoiler

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы