pagination illusion with jQuery

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>

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)

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

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