jQuery调用$('.hide-show').slice(0,12).show()初始加载不显示div怎么办

问题根因 #

你的脚本执行时机早于DOM渲染完成的时间，此时$('.hide-show')无法选中所有PHP生成的动态div元素，导致初始的slice(0,12).show()没有生效。点击加载更多时页面已经渲染完成，选择器可以正常获取元素，所以功能正常。

解决方案 #

将所有操作DOM的逻辑包裹在jQuery的DOM加载完成回调中，确保执行时所有元素已经渲染完毕：

<script>
// 等价于 $(document).ready(function() { ... })
$(function() {
  // 初始展示前12个div
  $('.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>

额外注意点 #

• 修正代码中第4个div的注释语法错误，原代码注释为<!--- rest of the code->，缺少闭合的--，正确写法为<!-- rest of the code -->，避免浏览器解析DOM时出现异常。
• 如果后续有异步加载新增的.hide-show元素，在新元素插入DOM后重新调用一次$('.hide-show').slice(0,12).show()即可保证初始展示逻辑正常。

内容的提问来源于stack exchange，提问作者Smit Vasava