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/

Answer 2

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

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

Answer 3

我为此使用 csstransition-delay属性，并使用 scss 为每个<li>元素增加它

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>