如果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顯示無，我會很樂意嘗試。

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)

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

Answer 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();
});

Answer 3

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

要么

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

Answer 4

希望我理解Q，這是我提出的小提琴 。 很好，很簡單。

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

Answer 5

我會嘗試在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>

Answer 6

您還可以使用striptags函數檢查字符串，因此從您的“推薦”值中使用內置函數“striptags”中的php刪除標簽，因此現在只剩下可以輕松比較的文本。