Как посчитать количество элементов внутри div?

Question

Есть div с классом "ads". В нём находятся div'ы с классом "ads__part".

Как написать скрипт, который будет считать количество "ads__part" внутри "ads" (он единственный), и если их ("ads__part") количество равно двум, то добавить класс "gridTemplateColumns2" к "ads"?

<body>
 <div class = "ads">
  <div class = "ads__part"></div>
  <div class = "ads__part"></div>
 </div>
</body>

Answer 1

<script>
   document.querySelectorAll('.ads').forEach(el => {
    let divCount = el.querySelectorAll('.ads__part').length;
    switch(divCount) {
      case 1:
        el.classList.add("gridTemplateColumns1");
        break;
      case 2:
        el.classList.add("gridTemplateColumns2");
        break;
      case 3:
        el.classList.add("gridTemplateColumns3");
        break;
    }
     });
  </script>

Answer 2

Для любого количества блоков:

document.querySelectorAll('.ads').forEach(el => {
  el.classList.add(`gridTemplateColumns${el.querySelectorAll('.ads__part').length}`);
  console.log(el.outerHTML);
});

<div class="ads">
  <div class="ads__part"></div>
</div>
<div class="ads">
  <div class="ads__part"></div>
  <div class="ads__part"></div>
  <div class="ads__part"></div>
  <div class="ads__part"></div>
</div>
<div class="ads">
  <div class="ads__part"></div>
  <div class="ads__part"></div>
</div>

БЛОГ НА HUSL

Как посчитать количество элементов внутри div?

Ответы (2 шт):