Блог

у меня возникли проблемы с отображением данных с помощью методов jquery slice() и show() для отображения результирующих динамических разделений из метода php. код приведен ниже:

 <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 дивов, которые он должен показывать , но при нажатии на него, начиная с первых 12 дивов, и на словах он работает отлично. может кто-нибудь , пожалуйста, помочь мне с этим вопросом, извините за мой плохой почерк.

Поместите его в документ.готово должно устранить проблему

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

https://jsfiddle.net/gxjm6p9e/