Javascript 如果div为空，则将容器div设置为"；显示：无“；

在过去的一天里，我一直在尝试让这段代码在这些论坛中运行，但没有成功

如果

div

中有一个没有内容，我想隐藏一个容器

div

我得到的脚本如下：

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

});

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

我尝试将此应用于的HTML如下所示：

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

});

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

/images/video point.jpg“alt=”video pointer“/>

基本上，在wordpress中，客户端将有机会添加视频，这有点冗长，但它们被包装在

p

标签中。但是，如果他们不将任何内容上传到特定区域，我希望容器

div

具有

显示：无

，这样，如果视频已上传，则只显示容器上传

---

如果有更简单的方法查看

div

并判断它是否为空，那么让container

div

显示none，我很乐意尝试。

使用

：empty

伪类

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

这将检查您是否有空段落（

），而

检查空的

.video thumb

元素

---

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

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

小提琴示例：

或

---

希望我能理解Q，这是我想出的。很好很简单

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

---

我会尝试在html标记和

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

应该是

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

但是，您也可以在PHP中执行以下操作：

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

---

你可以用几种方法来做

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

或

您还可以使用striptags函数检查字符串，以便使用php内置函数“striptags”从“推荐”值中删除标记“因此，现在只剩下可以轻松比较的文本。
感谢您的快速响应，我刚刚添加了此内容，但没有成功。查看控制台，我看不到与其他js文件有任何冲突，因此对它不起作用的原因感到困惑。请发布一篇关于您的尝试的文章，并用链接更新问题刚才添加了一个链接，我添加了2个容器，一个有内容，一个没有内容，正如你看到的那样，脚本不想工作1）你必须在小提琴中选择jQuery库：）（不是mootools）2）
empty
如果元素中有空格，则返回false 3）在你的特定情况下，最好检查你是否有段落，因此请参阅我的下一个更新库，我是小提琴新手，所以我没有意识到。我用新的库更新了fiddle，在特定的div中没有任何空格。php工作了..有点。。。它只删除了视频拇指div，而我需要视频中心div消失，如果没有明显的内容。另外，当添加到页面中的其他容器时，即使存在内容，也会去掉div(
$('.video-centre').each(function(){
   if($(this).find('div.video-thumb').html('') == '')
      $(this).hide();
});

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