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。所以，如果以下情况属实：

<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

参考文献：

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();
}

* update：第一个例子只适用于只有一个'.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();
    }
});

Answer 4

这篇文章超级老了，但出于某种原因它出现在我的Feed中，所以我仍然会给我两分钱：

$('.example').each(function(){
  let $parent = $(this);
  if($parent.find('span').length === $parent.find('span.hidden').length) {
    $parent.hide();
  }
});

如果隐藏了子跨度，则隐藏父div

4 个答案: