当两个元素具有相同的计数值时，jquery隐藏元素答案

【问题标题】：jquery hide element when two elemnts have the same count value当两个元素具有相同的计数值时，jquery隐藏元素
【发布时间】：2020-05-24 06:55:51
【问题描述】：

如果 products.html 中的 div 和 products.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>

【问题讨论】：

什么是“计数”？
请提供上述示例的 HTML。
如果count 是指length，那应该永远等于 1 或 0，因为您选择的是 ID。

标签： jquery html css

【解决方案1】：

由于您没有提到 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>

检查这个。我添加了两个主要的 div 并且每个 div 还有 2 个子 div。所以我确实计算了每个子div的数量，如果计数匹配，那么按钮将被隐藏。因此，只需将此应用于您的要求。

您可以通过官方文档jQuery children找到更多关于children()的信息

还可以在stackoverflow 中找到更多有关此实时示例的信息

谢谢

【讨论】：

对不起，我忘记添加 html.. 我现在添加了...我试过你的方法它仍然无法正常工作

【解决方案2】：

发生这种情况是因为当加载调用尚未触发时，您的计数检查发生在文档准备就绪时。您需要将检查移动到一个函数并在加载完成后调用它

例如：

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

【讨论】：