javascript - 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/