jquery hide element when two elemnts have the same count value

Question

i want to hide the show-more button if both the div from products.html and the loaded elements from products.html have the same number of divs

$(document).ready(function(){
    var eleng_count = $('body div.pro-pop').length;
    var ileng_count = $('#pro-pop > div').length;

    if (eleng_count == ileng_count) {
        $('.show-more').hide();
    };
});

<div>
 <script>
     $(function(){
           $('#pro-pop').load('products.html .pro-pop:lt(6)' ,function(){
             $('div .pro-pop').addClass('product-full');
         });
    });
 </script>
</div>
        
<div class="show-more">
  <p>Show more</p>
  <i class="fas fa-chevron-down" style="margin: 0 auto 3px 23.5vw; display: block; font-size: 4vw;"></i>
</div>

If by `count` you mean `length`, that should only ever equal 1 or 0, since you're selecting it with an ID. — thingEvery, Feb 08 '20 at 09:13

score 0 · Answer 1 · answered Feb 08 '20 at 09:25

Since you have not mentioned html structure let me build something like below as you asked in the question

  $(document).ready(function () {

        var div01_children_count = $('#div01').children('div').length
        var div02_children_count = $('#div02').children('div').length
        //Altenative option
        // var div01_children_count = $("#div01 > div").length
        // var div02_children_count = $("#div02 > div").length
        
        if (div01_children_count == div02_children_count) {
            $('.show-more').hide();
        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="div01">
            <div id="01_child_01">child of div01 </div>
            <div id="01_child_02">child of div01</div>
        </div>
        <div id="div02">
            <div id="02_child_01">child of div02</div>
            <div id="02_child_02">child of div02</div>
        </div>
        <button class="show-more">show more</button>

Check this. I have added two main div s and each of that div has 2 more child divs . So I do count number of child div inside each of them and if count get matched then button will be hidden. So just apply this to your requirement .

You can find more about children() with official document jQuery children

Also find more with this real time examples in stackoverflow

Thanks

sorry about that i forget to add the html.. i added it now... i tried you method its still not working — moh, Feb 09 '20 at 01:12

score 0 · Answer 2 · answered Feb 09 '20 at 01:20

This happens because your count check happens at document ready when the the load call is not yet triggered. You need to move you check to a function and call it after load is completed

Eg:

function checkCount() {
   var div01_children_count = $('#div01').children('div').length
   var div02_children_count = $('#div02').children('div').length
   //Altenative option
   // var div01_children_count = $("#div01 > div").length
   // var div02_children_count = $("#div02 > div").length

   if (div01_children_count == div02_children_count) {
      $('.show-more').hide();
   }
}

Call checkCount() once load is complete.

Eg:

 $(function(){
   $('#pro-pop').load('products.html .pro-pop:lt(6)' ,function() {
     checkCount(); // check div count and hide show more button
     $('div .pro-pop').addClass('product-full');
   });
});

jquery hide element when two elemnts have the same count value

2 Answers2