If div is empty, set the container div to “display:none”

I've been trying to get this code to work for the past day whilst searching through these forums but without any success.

I'm looking to hide a container div if one of the div's inside has no content.

The script I've got is below:

$('.video-centre').each(function(){
  if ($(this).find('.video-thumb p').text().length == "")
    $(this).find('.video-centre').css("display", "none");

});

The HTML that I'm trying to apply this to is below:

<div class="video-centre">
  <div class="video-point">
    <img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" />
  </div>
  <div class="video-thumb">
    <?php the_field('testimonials'); ?>
  </div>
  <p class="video-more">
    <a href="javascript:animatedcollapse.show(['expandable-1'])">View More</a>
  </p>
  <div id="expandable-1">
    <div class="video-thumb">
      <?php the_field('testimonials_hidden'); ?>
    </div>
    <p class="video-close">
      <a href="javascript:animatedcollapse.hide(['expandable-1'])">Close</a>
    </p>
  </div>
</div>

Basically, within wordpress, the client will have the opportunity to add videos, it's a bit long winded but they get wrapped in p tags. However if they don't upload anything to a specific area, I would like the container div to have display:none, resulting in only containers being shown if videos have been uploaded.

If there's an easier way to look at the div and say if it's empty then get container div to display none I'd be happy to try that.

Answers


Use :empty pseudoclass

if ($(this).find('.video-thumb p').is(':empty'))

this checks if you have an empty paragraph (<p></p>), while

if ($(this).find('.video-thumb').is(':empty'))

checks an empty .video-thumb element


After your edit: if you have spaces inside div the condition return false so it's better to simple check

if ($(this).find('.video-thumb p').length === 0)

Example Fiddle : http://jsfiddle.net/6nyF8/6/


You could do it in several ways.

$('.video-centre').each(function(){
   if($(this).find('div.video-thumb').html('') == '')
      $(this).hide();
});

OR

$('.video-centre').each(function(){
   if($(this).find('div.video-thumb').children().length == 0)
      $(this).hide();
});

if ($(this).find('.video-thumb p').text() == "")

or

if ($(this).find('.video-thumb p').is(':empty'))

Hope I understand the Q, here's the fiddle I came up with. Nice and simple.

if ($('.video-centre').find('div:hidden').size() > 0) {
    $('.video-centre').children().hide();
}

i would try remowing line feeds between html tags and

<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>

should be

<div class="video-thumb"><?php the_field('testimonials'); ?></div>

but you could also do the trick in PHP:

<?php if (the_field('testimonials')=="") $style=" style='display:none'";?>
<div class="video-thumb" <?php print $style;?>>
<?php the_field('testimonials'); ?>
</div>

You can also check string with striptags function so from your "testimonials" value remove tags using php in built function "striptags" so now only text will remain which can be compare easily.


Need Your Help

Add UIButtons in UIScrollView Programmatically

iphone objective-c ipad uiscrollview uibutton

I am new to iPhone development, and I want to know how can I add UIButtons in a UIScrollView?