CODEWITHSUNDEEP
jquery
teeray
teeray

Reputation: 1

Hide parent div if child spans are hidden

I'm trying to hide the parent DIV if all the child spans have a hidden class. There are other divs with the same class in my document that have one or two hidden spans, but I want to only hide the parent div when all three children have the hidden class.

Here's my HTML:

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

I DO NOT want to hide the parent Div if there are any span elements with a class that is visible. So, if the following is true:

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

The example div should still be visible. It should only be visible if all three child spans have the hidden class.

And here's the jQuery I've tried:

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

Needless to say, it hasn't worked.

Edit: selectors changed - I'd updated my example to be more generic.

Upvotes: 0

Views: 3669

Answers (4)

poorly-written-code
poorly-written-code

Reputation: 1073

This post is super old, but for some reason it popped up in my feed, so I'll still give my two cents:

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

Upvotes: 0

cwebbdesign
cwebbdesign

Reputation: 41

This answer assumes that as stated in your example you are looking for the case when all 3 elements of the .example parent container have the .hidden class. 

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

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

*update: the first example only works in the case that there is only one '.example' element. The following example loops through each '.example' element individually.

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

Given that HTML, I'd suggest:

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

JS Fiddle demo.

This assumes that the .example element is the relevant parent element you're referring to.

Or a slightly alternative approach:

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

JS Fiddle demo.

References:

Upvotes: 0

Swarne27
Swarne27

Reputation: 5747

Try this way, if the parent div class is 'example`

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

according to your second explanation I have made the following change in-order to accommodate what you seek

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

Upvotes: 0

Related Questions