Как посчитать количество блоков внутри каждого отдельного div и добавить класс по условию?

Question

Подскажите, как посчитать количество блоков div.item внутри каждого отдельного div.content и добавить div.content класс, если количество блоков div.item именно в нём превышает 3 штуки?

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

Берём все элементы .content через .querySelectorAll(), далее проходим циклом .forEach() по ним и в каждом получаем элементы .item через тот же .querySelecorAll и смотрим их количество через .length

document.querySelectorAll('.content').forEach(function(e){ // Проходим циклом по всем .content
  if(e.querySelectorAll('.item').length > 3) // если в контент .item больше 3х
    e.classList.add('green'); // то .content добавляем класс .green
})

.content {
  margin-bottom: 10px;
}

.item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
}

.green .item {
  background: green;
}

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Аналогичный вариант на jQuery

$('.content').each(function(){
  if($(this).find('.item').length > 3)
    $(this).addClass('green')
})

.content {
  margin-bottom: 10px;
}

.item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
}

.green .item {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

document.querySelectorAll('.content').forEach(el => {
    if (el.querySelectorAll('.item').length > 3)
       el.classList.add("my-class");
});

.my-class {
    background: blue;
    color:white;
}


.content {
    margin: 5px;
}

<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 3

document.querySelectorAll('.content').forEach(el => {
  if (el.childElementCount > 3) el.classList.add('myclass')
})

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

Как посчитать количество блоков внутри каждого отдельного div и добавить класс по условию?

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