jquery - 使用 jQuery 我想在单击显示按钮时一次显示五个

Question

使用 jQuery，我想在单击显示按钮时一次显示五个。

这是我的代码：

<button class="show">show</button>
<ul>
    <li id="Li0">0</li>
    <li id="Li1">1</li>
    <li id="Li2">2</li>
    <li id="Li3">3</li>
    <li id="Li4">4</li>
    <li id="Li5">5</li>
    <li id="Li6">6</li>
    <li id="Li7">7</li>
    <li id="Li8">8</li>
    <li id="Li9">9</li>
    <li id="Li10">10</li>
    <li id="Li11">11</li>
    <li id="Li12">12</li>
    <li id="Li13">13</li>
    <li id="Li14">14</li>
    <li id="Li15">15</li>
</ul>

脚本是：

$(".show").click(function(){
    $("ul > li:lt(' + (index - 5) + ')+ ").addClass('active');
});

CSS是：

ul li{
    display:none;
}
.active{
    display:inline;
}

Answer 1

$(".show").click(function () {
    $("ul li").not(".active").slice(0, 5).addClass("active");
});​

演示。

Answer 2

$(".show").click(function () {
    $("ul li").not(":visible").slice(0, 5).slideDown();
    if($("ul li").not(":visible").length == 0)
         $(this).hide();
});​

http://jsfiddle.net/9Z5Jr/4/

Answer 3

使用您给定的 CSS。

尝试这个

$(".show").click(function() { 
  $("ul li:not(.active):lt(5)").addClass('active'); 
});

http://jsfiddle.net/ceehn/