隐藏父div如果子跨度隐藏

Question

我想隐藏父DIV，如果所有子跨度都有隐藏类。还有其他div在我的文档中具有一个或两个隐藏跨度，但我只想在所有三个孩子都隐藏类时隐藏父div。

这里是我的HTML：

<div class="example"> 
<span class="hidden">Design</span> 
<span class="hidden">Development</span> 
<span class="hidden">Branding</span> 
</div> 

我不想隐瞒父事业部，如果有一类是可见的任何span元素。因此，如果以下情况属实：

<div class="example"> 
<span class="visible">Design</span> 
<span class="hidden">Development</span> 
<span class="visible">Branding</span> 
</div> 

示例div应该仍然可见。只有在所有三个子跨度都具有隐藏类的情况下才能看到它。

而这里的jQuery的我已经试过：

$('.example').each(function(){ 
if($('.hidden')(':visible').length == 0) { 
$('.example').hide(); 
} 
}); 

不用说，它并没有奏效。

编辑：选择器改变 - 我更新我的例子是更通用的。

Answer 1

鉴于HTML，我建议：

$('.example').each(function(){ 
    var that = $(this).find('.hidden'); 
    return that.length === that.not(':visible').length; 
}); 

JS Fiddle demo。

这假设.example元素是您所指的相关父元素。

或者稍微另一种方法：

$('.example').css('display',function(){ 
    var children = $(this).children(); 
    return children.length === children.not(':visible').length ? 'none' : 'block'; 
}); 

JS Fiddle demo。

参考文献：

• css()。
• each()。
• find()。
• not()。
• :visible selector。根据你的第二个解释，我已在-以适应你寻求以下变化

Answer 2

试试这个方法，如果父DIV类是“example`

$(document).ready(function(){ 
    $('div.example .hidden').each(function(){ 
    $(this).parent().hide(); 
    }); 
}); 

$(document).ready(function(){ 
    var count = 0; 
    $('div.example .hidden').each(function(){ //take the count of hidden span tags 
    count++; 
    }); 
    $('div.example').children().each(function(){ 
    if($('div.example').children().length==count){ // check whether the count of hidden span tag element length is equal to all the child element length 
     $('div.example .hidden').parent().hide(); 
     }else{ 
      //alert('There is an visible element'); 
      } 
    }); 
}); 

Answer 3

这个答案假定正如您的示例中所述，您正在查找.example父容器的所有3个元素都具有.hidden类的情况。

var childElements = $('.example .hidden'); 

if (childElements.length === 3) { 
    $('.example').hide(); 
} 

*更新：第一个例子只适用于只有一个'.example'元素的情况。以下示例分别循环遍历每个“.example”元素。

var parents = $('.example'); 

// Loop through each parent element, finding only it's childeren 
parents.each(function(index, item) { 

    var $item = $(item), 
     childElements = $item.find('.hidden'); 

    if (childElements.length === 3) { 
     $item.hide(); 
    } 
});