jQueryを使ったページングの錯覚

Question

ヘイ、基本的なページ設定の影響を作りたいと思っています。 私は最初の9を表示したいので、10 - 100から隠す どのようにそれらの子供をつかまえますか？

私の次の要求を隠すことは明らかです。1-9 show 10-18 hide 19-100 あなたはアイデアを得ます。ありがとうございました。 線に沿って

マークアップは：あなたが:gtと:ltの組み合わせを使用することができます

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

：

<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

は、最初の9が、すべてを非表示にするには、:gtセレクタを使用することができますあなたの目標を達成するセレクター。

私が示唆している他の方法は、@ 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();