3

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

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不显示任何内容,我很乐意尝试。

4

6 回答 6

7

使用: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/

于 2012-09-07T10:22:23.113 回答
2

你可以通过几种方式做到这一点。

$('.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();
});
于 2012-09-07T10:41:55.970 回答
0

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

于 2012-09-07T12:00:39.800 回答
0
if ($(this).find('.video-thumb p').text() == "")

或者

if ($(this).find('.video-thumb p').is(':empty'))
于 2012-09-07T10:25:25.953 回答
0

我会尝试删除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>
于 2012-09-07T10:41:14.207 回答
0

希望我理解Q,这是我想出的小提琴。很好很简单。

if ($('.video-centre').find('div:hidden').size() > 0) {
    $('.video-centre').children().hide();
}
于 2012-09-07T10:37:19.810 回答