使用 jQuery 实现分页错觉

发布于 2024-10-04 16:08:49 字数 560 浏览 4 评论 0原文

嘿，我想创建一个基本的分页效果..我有（可以说）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>

原文

hey, i'm wanting to create a basic pagination affect.. i have (lets say) 100 posts.
i want to show the first 9, so therefore hide from 10 - 100
how do i grab those children.

my next request to have in mind is obviously to hide 1-9 show 10-18 hide 19-100
you get the idea.
thanks in advanced.

mark up along the lines of:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Bonjour°[大白 2024-10-11 16:08:49

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

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

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

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

To hide all but the first nine, you can use the :gt selector:

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

You can use a combination of the :gt and :lt selectors to achieve your goal.

The other way I would suggest would be to use slice as per @tvanfosson's answer. (+1)

回复收藏 0 原文

简单爱 2024-10-11 16:08:49

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

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

You can use the slice function to restrict the selection to a range. Note that it's zero-based.

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

回复收藏 0 原文

少女情怀诗 2024-10-11 16:08:49

这是一些代码。显然，您需要设置 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();

Here's some code. Obviously you'll want to set page and then execute the each() code whenever the user changes the page.

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

回复收藏 0 原文

~没有更多了~