1

Допустим у меня на странице каталога есть 200 одинаковых элементов с одинаковым классом. Как мне с помощью js добавить новый класс через n элементов. Предположим через 8, т.е. добавить новый класс 1, 9, 17, 25 ... - элементу ?

1
  • 1
    А почему не через CSS?
    – user207618
    Commented 12 апр. 2018 в 19:56

4 ответа 4

2

Без всяческих джикверей:

let elements = document.querySelectorAll('.some-class'); 
for (let i = 0; i < elements.length - 8; i += 8) 
  elements[i].classList.add('another-class');
1
    var elements = document.getElementsByClassname(oneClass);
      for (var i=0||1||etc; i<=elements.length; i+=8) 
         {element[i].setAttribute(class, onePerEight)};
2
  • Позвольте узнать что за метод setAttr? В JS - setAttribute, в jQuery - attr.
    – user207618
    Commented 12 апр. 2018 в 20:00
  • поправил, понадеялся на память, а она подвела...
    – axdrv
    Commented 12 апр. 2018 в 20:02
1

Предложу такой вариант, разбил по шагам для понимания (можно упороться и засунуть в одну функцию)

1 выбрать все элементы

var a = document.querySelectorAll('.card');

2 выбрать каждый 8-й

var b = [].filter.call(a, function(item, i){return i%8 == 0});

3 присвоить выбранным доп класс

b.forEach(function(el){ el.classList.add('new-class')});
2
  • Я упоролся: [...document.querySelectorAll('.card')].forEach((e, i) => i % 8 === 0 ? e.classList.add('some') : null).
    – user207618
    Commented 12 апр. 2018 в 20:17
  • @Other +1 ))))) Commented 12 апр. 2018 в 20:33
0
var $elements = $(".odinakovyjKlass");
for (var i = 0; i < $elements.length; i = i + 8) {
  $elements.eq(i).addClass("drugojKlass");
}

@LeonidMyronov напомнил про filter:

$(".odinakovyjKlass").filter(index => !(index % 8)).addClass("drugojKlass");
1
  • ))) Значит в правильном направлении думаю)))
    – axdrv
    Commented 12 апр. 2018 в 19:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.