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/

你可以把它一点点高效的高速缓存里的名单：

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

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

Answer 4

我使用CSS transition-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类，这是负责不透明性变化

看到例如下面编译青菜：

$('.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>