javascript - 根据内容为空隐藏DIV

Question

我有一个名为 swiper slide 的幻灯片 jquery 插件。我使用幻灯片显示来自 PHP mysql 查询的结果，一次显示 9 个结果。

目前我的查询代码和幻灯片代码是这样的...

PHP 查询

$query = mysql_query("SELECT * FROM tblClients  
                      WHERE tblclients.package =  
                      'standard' LIMIT 0, 9", $connection); 

$query_page_2 = mysql_query("SELECT * FROM tblClients  
                             WHERE tblclients.package =  
                             'standard' LIMIT 9, 9", $connection);      

$query_page_3 = mysql_query("SELECT * FROM tblClients  
                         WHERE tblclients.package =  
                         'standard' LIMIT 18, 9", $connection); 

幻灯片代码

       <div class="swiper-slide">


<?php while ($rows = mysql_fetch_array($query)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>     
        </div>




        <div class="swiper-slide">

<?php while ($rows = mysql_fetch_array($query_page_2)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>          
        </div>




        <div class="swiper-slide">

<?php while ($rows = mysql_fetch_array($query_page_3)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>  

        </div>

我的问题是，无论是使用 jquery 还是 PHP，我如何才能隐藏里面为空或没有结果的幻灯片。因此，如果我只返回 8 个结果，则第一张幻灯片应该是唯一显示的。

Answer 1

您可以使用 :empty selector

Select all elements that have no children (including text nodes).

$(function(){
     $('.swiper-slide:empty').hide()
});

或者，您可以使用简单的 CSS 实现它 :empty伪类

.swiper-slide:empty { display: none;}