主页 / 问题 / 1198703
Accepted
spl33t
Asked:2021-11-02 01:35:26 +0000 UTC2021-11-02 01:35:26 +0000 UTC

如何计算每个列表中的元素数量以及元素是否为一个隐藏标题

  • 772

有几个具有不同数量元素的列表。您需要计算每个列表中有多少元素，如果只有一个元素，则隐藏此列表上方的标题。这是我的列表和脚本的示例：

$('.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>

javascript

4 个回答

  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>

    • 1
  2. Best Answer

    $('.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>

    • 0 

  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>

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

相关问题