jQuery一张一张显示列表项的最佳方法

Question

我想通过单击一个按钮来逐一显示列表项。

这是我的代码：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('ol > li').hide();
        $('button').click(function() {
            if ($('ol > li:first').is(':visible'))
                $('ol > li:visible:last').next().show();
            else
                $('ol > li:first').show();
        });
    });
</script>
<button type="button">Show</button>
<ol>
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
</ol>

它有效，但我很确定可以对其进行优化。 最好的方法是什么？

提前致谢！

Answer 1

您可以单行显示：

$('button').click(function() {
    $('ol > li:hidden:first').show();
});

工作示例-http://jsfiddle.net/WV84H/

您可以通过缓存li的列表来使其效率更高：

var $listItems = $('ol > li');
$('button').click(function() {
    $listItems.filter(':hidden:first').show();
});

工作示例-http://jsfiddle.net/WV84H/1/

Answer 2

$('ol > li').hide();
$('button').click(function() {
    $('ol > li:hidden').eq(0).show();
});

工作示例 http://jsfiddle.net/YVeuY/

Answer 3

我为此使用css transition-delay属性，并为每个<li>元素使用scss对其进行递增

https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

    $delay-increment: 0.3;
    $delay: 0-$delay-increment;

    @for $i from 1 through 10 { //adding transition delays to provide sequential icons show on profile load
        li:nth-child(#{$i}) {
            transition-delay: #{$delay+$delay-increment}s;

            &:after{
                transition-delay: #{$delay+$delay-increment}s;
            }
        }

        $delay: $delay + $delay-increment;
    }

显示<li>我使用JS只是设置负责不透明度更改的类show

请参见下面带有已编译sass的示例：

 $('.show').click(function() { $('ul').toggleClass('show'); }) 

 li:nth-child(1) { transition-delay: 0s; } li:nth-child(2) { transition-delay: 0.3s; } li:nth-child(3) { transition-delay: 0.6s; } li:nth-child(4) { transition-delay: 0.9s; } li:nth-child(5) { transition-delay: 1.2s; } li:nth-child(6) { transition-delay: 1.5s; } li:nth-child(7) { transition-delay: 1.8s; } li:nth-child(8) { transition-delay: 2.1s; } li:nth-child(9) { transition-delay: 2.4s; } li:nth-child(10) { transition-delay: 2.7s; } ul>li { opacity: 0; transition: opacity .4s; } ul.show>li { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='show'>Show</button> <ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> 

Answer 4

<script>
$(document).ready(function() {
  var $liList= $('ol > li');
   $liList.hide();
    $('button').click(function() {
        var $first=$liList.filter(":first")
        if ($first.is(':visible'))
            $liList.filter(":visible:last').next().show();
        else
            $first.show();
    });
});
</script>