シンプルなjQueryページネーミング

Question

私は約50のdivを持つページを持っています。私はこれらのdivを6つのグループに編成して、クライアントが「情報過多」を取得しないようにしたいと思います。私は簡単なexample/reduced test case私の問題を作成しました。ご覧のように、たくさんのdivがあり、ページが読み込まれると最初の6つだけが表示されますが、ページ2または次をクリックすると次の6つが表示されるようにしたいと思います。あなたのページ番号のクラスもclass="current"に設定する必要があります。

これまではjQueryを使ってみましたが、かなり詰まっています！どんな助けでも大歓迎です！

ページが要求される

Answer 1

、すべてのコンテンツのdivを非表示にし、その後、それらを反復処理し、「ページ」に表示されますものを示しています。このコードの

showPage = function(page) { 
    $(".content").hide(); 
    $(".content").each(function(n) { 
     if (n >= pageSize * (page - 1) && n < pageSize * page) 
      $(this).show(); 
    });   
} 

http://jsfiddle.net/jfm9y/184/

Answer 2

部品はかなりではありませんしかし私はそれが仕事をすると思う

var currentpage = 1; 
var pagecount = 0; 

function showpage(page) { 
    $('.content').hide(); 
    $('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show(); 
    $('#pagin').find('a').removeClass('current').eq(page).addClass('current'); 

} 

$("#pagin").on("click", "a", function(event){ 
    event.preventDefault(); 
    if($(this).html() == "next") { 
     currentpage++; 
    } 
    else if($(this).html() == "prev") { 
     currentpage--; 
    } else { 
      currentpage = $(this).html(); 
    } 
    if(currentpage < 1) {currentpage = 1;} 
    if(currentpage > pagecount) {currentpage = pagecount;} 
    showpage(currentpage); 
});                 

$(document).ready(function() { 
    pagecount = Math.floor(($('.content').size())/6); 
    if (($('.content').size()) % 6 > 0) { 
     pagecount++; 
    } 

    $('#pagin').html('<li><a>prev</a></li>'); 
    for (var i = 1; i <= pagecount; i++) { 
     $('#pagin').append('<li><a class="current">' + i + '</a></li>'); 
    } 
    $('#pagin').append('<li><a>next</a></li>'); 
    showpage(1); 

});​