Как добавить класс в зависимости от количества блоков?

Question

[Мухаммад Магомедов]

Как добавлять класс родителю через JavaScript, в зависимости от того, сколько у него дочерних элементов?

В данном случае родитель - это блок .row
Если у родителя 3 дочерних элементов, то добавляем класс .row_3
А если 5 дочерних элементов, то соответственно класс .row_5

Код:

Comments

[Froggyweb]

Затея так себе. А что если будет 45 или 492?
Поставь задачу более широко.

[Мухаммад Магомедов]

Froggyweb, Вы правы, не учел.

Answer 1

[0xD34F]

document.querySelectorAll('.row').forEach(addClass);

// или

for (const n of document.getElementsByClassName('row')) {
  addClass(n);
}

Как выглядит функция addClass? Зависит от того, что вам нужно. Есть разные варианты:

• Если добавляемый класс всегда содержит количество дочерних элементов:
  
  

  const addClass = el => el.classList.add(`row-${el.children.length}`);

  
  
• Если добавлять класс надо не всегда и имя может быть произвольным, тогда можно сделать объект, где ключами будут количества дочерних элементов, а значениями - соответствующие классы:
  
  

  const classes = {
    3: 'row-3',
    5: 'row-5',
    7: 'row-xxx',
  };
  
  function addClass(el) {
    const className = classes[el.children.length];
    if (className) {
      el.classList.add(className);
    }
  }

  
  
• Если класс должен добавляться когда количество дочерних элементов попадает в некоторый интервал, то складываем в массив пары из классов и верхних границ соответствующих интервалов:
  
  

  const classes = [
    { max:        3, name: 'row-0-3' },
    { max:        5, name:        '' }, // если дочерних элементов 4 или 5, класс не добавляется
    { max:        7, name: 'row-6-7' },
    { max: Infinity, name: 'row-7-x' },
  ];
  
  function addClass(el) {
    const { name } = classes.find(n => n.max >= el.children.length) ?? {};
    if (name) {
      el.classList.add(name);
    }
  }

  
  
• В случае, когда классов может быть несколько, делаем массив, содержащий пары из классов и функций, принимающих количество элементов и определяющих, надо ли данные классы добавлять:
  
  

  const classes = [
    [ c => c < 5,          'row-0-4' ],
    [ c => c % 2,          'row-odd' ],
    [ c => 6 < c && c < 9, 'row-7-8' ],
  ];
  
  const addClass = ({ classList, children: { length } }) =>
    classList.add(...classes.reduce((acc, n) => (
      n[0](length) && acc.push(n[1]),
      acc
    ), []));