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

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

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

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

根据@ tvanfosson的回答，我建议的另一种方法是使用slice。（1）

Answer 2

您可以使用slice功能将选择范围限制在某个范围内。请注意，它是从零开始的。

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

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();

jQuery的分页错觉

3 个答案: