jquery - Li を 5 つだけ表示し、あと 5 つを表示するボタンを表示するにはどうすればよいですか

Question

私は 500 を持っていliますが、最初は 5 だけを表示したいので、ボタンをクリックするとさらに が表示liされ、最後には が表示されなくなりますliが、すべてが別の 5 になるわけではありませんか?

Answer 1

var $li = $("li"),
    chunk = 5;

$li.slice(chunk).hide();

$("button").click(function() {
    $li.filter(":hidden").slice(0, chunk).show();
});​

jsFiddle。

このコードを書くためのより効率的な方法がありますが、これはかなり読みやすいです。

Answer 2

あなたの後に「もっと」ボタンを動的に追加し、ulすべてが表示されるまで一度に5つのliを表示することができます。次に、[詳細] ボタンを非表示にできます。

var vis = 5;
$('li').slice(vis).hide();

var $more = $('<a href="#">test</a>')
$more.click(function(){
    $('li:hidden').slice(0,vis).show();
    if($('li:hidden').length == 0)
        $more.hide();
});
$('ul').after($more);

実際の例: http://jsfiddle.net/JKWtP/