Javascript 客户端分页

我有N个html元素。是否可以使用jQuery隐藏N-10个底部元素，然后创建一个“LoadMore”按钮来显示另外10个元素

我的意思是当页面加载时，只有前10个元素可见，当我单击“加载更多”时，前20个元素可见，当我再次单击时，前30个元素可见，等等

会是这样吗

$('li').slice(-($('li').length - 10)).hide();

然后

var num_visible = 10;
$('#loadMore').click(function () {
  $('li').slice(num_visible, num_visible + 10).show();
  num_visible += 10;
});

---

对于您的特定用例，您可能需要添加一些进一步的验证——这只是展示了一般的想法，但是您是否希望这样做

var currShowing = 10;
changeShowing()
function changeShowing() {
 $('div').each(function(index, value) {
    if (index < currShowing - 1 ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  })   
}

function showMore() {
  currShowing += 10;
  changeShowing();
}

var=10；
变更显示（）
函数changeshipping（）{
$（'div'）。每个函数（索引、值）{
如果（索引<1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
})   
}
函数showMore（）{
电流+=10；
变化显示（）；
}

---

我能想到的唯一问题是，如果您有一个大的数据集（或者您希望动态加载，以便在添加项目时不必刷新整个页面），那么您确实希望使用服务器端分页。但我只有400个项目。太多了吗？这要看情况，你得测试一下。