javascript - 如果div为空，设置容器div为 "display:none"

Question

在过去的一天里，我一直在努力让这段代码正常工作，同时在这些论坛中进行搜索，但没有成功。

如果其中一个 div 没有内容，我想隐藏一个容器 div。

我得到的脚本如下:

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

});

我尝试将其应用到的 HTML 如下:

<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>

基本上，在 wordpress 中，客户端将有机会添加视频，它有点冗长，但它们被包裹在 p 标签中。但是，如果他们没有将任何内容上传到特定区域，我希望容器 div 具有 display:none，这样如果视频已上传，则只显示容器.

如果有更简单的方法来查看 div 并判断它是否为空，然后让容器 div 显示 none 我很乐意尝试。

Answer 1

使用 :empty伪类

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

这会检查你是否有一个空段落(<p></p>)，而

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

检查一个空的 .video-thumb元素

---

编辑后:如果 div 内有空格，则条件返回 false，因此最好进行简单检查

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

示例 fiddle :http://jsfiddle.net/6nyF8/6/