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/


Need Your Help

Foreign key mapping RESTKIT Core Data between two end point results

iphone ios ipad core-data restkit

Is there any possibilities to join two end point results using foreign key.

Inconsistency in column numbers between ALTER TABLE and INSERT INTO/VALUES

php mysql sql sql-server

I wish to ask a question about CREATE TABLE, ALTER TABLE, UPDATE/SET/WHERE because I am thoroughly confused about how to use these commands when a PRIMARY KEY is involved, and I am getting different

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.