单击a元素显示5个li

Question

我有一个包含ul个项目的大li个列表。我想使用JavaScript，但我不知道如何。我该怎么做：

前5个li可见。其余的都是隐藏的。单击更多按钮时。每次点击都会。它提供5到li的显示。我在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();
}
});

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

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