通过点击某个元素显示5 li's

Question

我有一个很大的ul列表与li项目。我想使用JavaScript，但我不知道如何。我怎样才能做到这一点：

前5年的li是可见的。其余的是隐藏的。当你点击更多按钮。每次点击。它提供5到李氏的显示。我在jsfiddle中制作html。

http://jsfiddle.net/FnBrx/

感谢您的帮助球员，

Answer 1

如何

$('li:gt(3)').hide();​​​​​​​​​​​​​​ 
$('.more').on('click', function(){ 
    $('li:visible:last').nextAll(':lt(4)').show(); 
}); 

FIDDLE

Answer 2

$('.more').click(function() { 
    $('li a:not(:visible)').slice(0,5).show().css('color','red'); 
    return false; 
});​ 

Updated Demo

.slice(0,5)减少匹配设置为仅第一五行

Answer 3

你可以做这样的事情

$('li').each(function(rowIndex){ 
    if(rowIndex<=5) 
     $(this).show(); 
    } 
else 
{ 
$(this).hide(); 
} 
}); 

，然后有一个按钮和Click事件实现相同的功能。