Hide DIV based on content

I have a jQuery slide plugin called swiper slide. I use a slide to display the results from the results of a mysql PHP query at a time.

Currently, my request code and slide code look like this:

PHP QUERY

$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); 

SLIDE CODE

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

My question is using jquery or PHP, how can I hide a slide that is empty or has no results inside. Therefore, if I have only 8 results left, the first slide should show only one.

+4
source share
4 answers

, Query 0 - if(mysql_num_rows($query_page_2) > 0) {

    <?php if(mysql_num_rows($query_page_2) > 0) { ?>
    <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>
    <?php } ?> 
+2

:empty

, ( ).

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

, , CSS :

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

you can use it to help you

$(".swiper-slide:empty:empty").css("display", "none");
+2
source

Just using this css property you will get the correct result

.swiper-slide img[src=""] {
    display: none;
}
+1
source

Source: https://habr.com/ru/post/1621585/


All Articles