jquery $('.hide-show')slice(0,12).show() 没有正确显示 div？

Question

我在使用 jquery slice() 和 show() 方法显示数据以显示从 php 方法生成的动态 div 时遇到问题。代码如下：

<style>
.hide-show
{
 display :none;
}
</style>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>

.
.
.
.
..
and so on 

<div class="mt2 text-center load-more-btn" ">
                    <a href="javascript:void(0);" class="btn btn-blank btn-sm-width"><?php echo lang('store load more'); ?></a>
                </div>

<script>
$('.hide-show').slice(0,12).show();
 $(".load-more-btn a").click(function () {
            
              $('.hide-show:hidden').slice(0,12).show();
             
             if($('.hide-show:hidden').length == 0 )
             {
                 $(".load-more-btn a").fadeOut();
             }
        });



</script>

在初始页面加载时，它没有显示它应该显示的前 12 个 div，但是在单击它从前 12 个 div 开始时，它可以完美地工作。谁能帮我解决这个问题，抱歉我写得不好。

Answer 1

将它放在 document.ready 上应该可以解决问题

$(document).ready(function(){
  $('.hide-show').slice(0,12).show();
});

https://jsfiddle.net/gxjm6p9e/