jquery скрыть элемент, когда два элемента имеют одинаковое значение

Question

Я хочу скрыть кнопку «Показать больше», если и div из продуктов. html и загруженные элементы из продуктов. html имеют одинаковое количество div

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

Answer 1

Это происходит потому, что проверка вашего счета происходит при готовности документа, когда вызов загрузки еще не инициирован. Вам необходимо переместить чек в функцию и вызвать ее после завершения загрузки

Например:

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

Вызов checkCount() после завершения загрузки.

Например:

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

Answer 2

Поскольку вы не упомянули структуру html, позвольте мне построить что-то вроде ниже, как вы задали в вопросе

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

Проверьте это. Я добавил два основных блока, и у каждого из них есть еще 2 дочерних элемента. Поэтому я считаю количество дочерних элементов div внутри каждого из них, и если счетчик совпадет, кнопка будет скрыта. Так что просто примените это к вашему требованию.

Вы можете найти больше информации о children() с официальным документом jQuery children

Также вы можете найти больше примеров в реальном времени в stackoverflow

Спасибо