javascript - 通过单击 a 元素显示 5 li

Question

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

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

小提琴

Answer 2

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

更新的演示

.slice(0,5)将匹配集减少到仅前五个元素

Answer 3

你可以做这样的事情

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

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