Как посчитать количество элементов в каждом списке и если элемент один скрыть заголовок

231

13 апреля 2022, 08:10

Есть несколько списков в которых разное количество элементов. Нужно посчитать сколько в каждом списке элементов и если элемент один то скрыть заголовок над этим списком. Вот пример моих списков и скрипта:

$('.category-group-list ul.list').each(function() {
  if ($(this).childElementCount == 1) {
    $("h4").addClass('hide');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-group-list">
  <h4>Арматура Ат100</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат100</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура Ат800</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

Answer 1

const categoryGroupList = document.querySelectorAll('.category-group-list');
categoryGroupList.forEach(item => {
  const h4 = item.querySelector('h4');
  const listItems = item.querySelectorAll('.list-item');
  if (listItems.length === 1) {
    h4.classList.add('hide');
  }
});

.hide {
  display: none;
}

<div class="category-group-list">
  <h4>Арматура Ат100</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат100</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура Ат800</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

Answer 2

$('.category-group-list ul.list').each(function() {  
    if (this.childElementCount == 1)    
        $(this).prev('h4').hide();  // $(this).parent().find('h4').hide();  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-group-list">
  <h4>Арматура Ат100</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат100</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура Ат800</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

Answer 3

$('.category-group-list').each(function(index, obj) {
  if (obj.children[1].childElementCount == 1)
      $(obj.children[0]).hide();
});

.category-group-list {
    border: 1px solid black;
    margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-group-list">
  <h4>Арматура Ат100</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат100</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>
<div class="category-group-list">
  <h4>Арматура Ат800</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

<div class="category-group-list">
  <h4>Арматура</h4>
  <ul class="list">
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
    <li class="list-item">Арматура Ат800</li>
  </ul>
</div>

Answer 4

[...document.querySelectorAll('.category-group-list ul')]
  .filter(ul => ul.children.length === 1)
  .forEach(ul => ul.parentElement.querySelector('h4').classList.add('hide'));

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как в в html c помощью JavaScript присвоить переменной введенный текст?

Вычитал что это делается через свойство valueНо я не разобрался что и куда прописать?

200

HTML

Как вставить переменную "i" из цикла for в html код на JQuery?

Имеется функция, где на страницу в блок #gallery добавляется некоторое кол-во div с классом blockКак сделать, чтобы в каждый из этих div дополнительно...

213

HTML