当所有孩子都有特定的班级时隐藏父div

时间：2018-01-05 11:19:35

标签： javascript jquery html css

我有这样的HTML：

<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term hide">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

我需要的是当内部的所有".woof_container"项都有"li"类时隐藏整个".hide"。

因此，在此示例中，".woof_container.woof_container_producer"应该隐藏，但".woof_container.woof_container_category"应该仍然可见。

你可以帮帮我吗？ THX！

6 个答案:

答案 0 :(得分：0)

您可以创建一个简单的jQuery代码，在其中测试每个容器中非隐藏元素的数量，如果找到 0 元素，则隐藏容器。

$('.woof_container').each(function() {
  if($(this).find('li.woof_term:not(.hide)').length == 0)
    $(this).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term hide">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

答案 1 :(得分：0)

$('.woof_container').each(function(){

  var hide = true;
  
  $(this).find('li').each(function(){
    if(!$(this).hasClass('hide')) {
      hide =false;
    }
  });
  
  if(hide) {
    $(this).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term hide">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

答案 2 :(得分：0)

检查所有li，如果它有隐藏类，则使用每个循环隐藏父div。

＆＃13;
＆＃13; 
$('.woof_container').each(function(){
  var hasAllHide = true;
  $(this).find('li.woof_term').each(function(){
    if(!$(this).hasClass('hide')){
    		hasAllHide = false;
    }
  });
  if(!hasAllHide){
   $(this).css('display','none');
  }
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term hide">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

$(document).ready(function(){
   var parents = $("div.woof_container");
   parents.each(function(elem){
      if($(this).find("li.hide").length != $(this).find("li").length)
      {
          $(this).hide()
      }
   });
});

答案 4 :(得分：0)

  

当我所有“li”项目都有“.hide”类时，我需要隐藏整个“.woof_container”。

你可以

1）使用过滤函数找到具有类woof_term和'隐藏'的元素具有相同计数的容器元素

2）隐藏上述步骤中返回的元素。

$('.woof_container ').filter(function(){
     var $this = $(this)
     return $this.find('.woof_term').length == $this.find('.woof_term.hide').length 
}).hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="woof_container woof_container_producer">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term hide">Nike<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Reebok<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Adidas<span class="quantity">(0)</span></li>
    <li class="woof_term hide">Puma<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

<div class="woof_container woof_container_category">
 <div class="woof_container_inner">
  <div class="woof_block_html_items">
   <ul class="woof_list">
    <li class="woof_term">Jacket<span class="quantity">(0)</span></li>
    <li class="woof_term">T-shirt<span class="quantity">(3)</span></li>
    <li class="woof_term">Dress<span class="quantity">(0)</span></li>
    <li class="woof_term">Boots<span class="quantity">(0)</span></li>
   </ul>
  </div>
 </div>
</div>

答案 5 :(得分：-2)

1.使用javascript
2.不要在li的父节点类中设置高度属性，当所有li隐藏时，高度将为0

相关问题
最新问题