使用jQuery实现分页错觉

Question

嘿，我想创建一个基本的分页效果..我有(比方说) 100篇文章。我想要显示前9，因此隐藏从10 - 100我如何抓住这些孩子。

我的下一个要求显然是隐藏1-9显示10-18隐藏19-100你明白了。在进阶时谢谢。

沿着这样的线标记：

<div class="grid">
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
  <div class="widget">some content...</div>
etc...
</div>

Answer 1

可以使用slice函数将选择范围限制在一个范围内。请注意，它是从零开始的。

$('.widget').hide().slice(9,17).show();

Answer 2

要隐藏除前九个之外的所有内容，可以使用:gt选择器：

$(".grid .widget:gt(8)").hide();

您可以组合使用:gt和:lt选择器来实现您的目标。

我建议的另一种方式是按照@tvanfosson的回答使用slice。(+1)

Answer 3

下面是一些代码。显然，您需要设置page，然后在用户更改页面时执行each()代码。

var ITEMS_PER_PAGE = 2;
var page = 1;

// Option 1
$('.grid > .widget').each(function(i, item) {
    var visible = i >= (ITEMS_PER_PAGE * (page - 1)) && i < (ITEMS_PER_PAGE * page);
    $(item).toggle(visible);
});

// Option 2 (based on other answers)
$('.grid > .widget').hide().slice((ITEMS_PER_PAGE * (page - 1)), (ITEMS_PER_PAGE * page)).show();