如果 div 为空，则将容器 div 设置为“display:none”答案

【问题标题】：If div is empty, set the container div to "display:none"如果 div 为空，则将容器 div 设置为“display:none”
【发布时间】：2012-09-01 05:23:02
【问题描述】：

过去一天，我一直在尝试让这段代码工作，同时搜索这些论坛，但没有任何成功。

如果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 显示空，我很乐意尝试。

【问题讨论】：

标签： javascript jquery html wordpress api

【解决方案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)

小提琴示例：http://jsfiddle.net/6nyF8/6/

【讨论】：

感谢您的快速回复，我刚刚添加了这个，但没有任何成功。查看控制台，我看不到与其他 js 文件的任何冲突，因此对它为什么不起作用感到困惑。
请发布您的尝试并使用链接更新问题
刚刚添加了一个小提琴链接，我添加了 2 个容器，一个有内容，一个没有，你可以看到脚本不想工作
1) 您必须在小提琴中选择 jQuery 库 :) （不是 mootools）2）empty 如果元素内有空格，则返回 false 3）在您的具体情况下，最好检查如果您有段落，请看我的下一个更新
抱歉，我是新手，所以没有意识到。我已经用新库更新了小提琴，并且在特定的 div 中没有任何空格。 jsfiddle.net/6nyF8/7

【解决方案2】：

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

或

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

【讨论】：

【解决方案3】：

希望我理解 Q，这是我想出的 fiddle。漂亮又简单。

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

【讨论】：

【解决方案4】：

我会尝试删除 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>

【讨论】：

php 工作了..有点......它只删除了 video-thumb div，而如果没有明显的内容，我需要 video-centre div 消失。此外，当添加到页面中的其他容器时，即使存在内容，它也会摆脱 div。
好的，我明白了，在这种情况下，将第一行 (
>

【解决方案5】：

您可以通过多种方式做到这一点。

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

【讨论】：

【解决方案6】：

您还可以使用 striptags 函数检查字符串，因此从您的“推荐”值中使用 php 在内置函数“striptags”中删除标签，因此现在只保留可以轻松比较的文本。

【讨论】：