Javascript jQuery逐个显示列表项的最佳方式

我想通过点击按钮一个一个地显示列表项

这是我的代码：

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

$（文档）.ready（函数（）{
$（'ol>li'）.hide（）；
$（“按钮”）。单击（函数（）{
如果（$（'ol>li:first'）。是（':visible'））
$（'ol>li:visible:last'）.next（）.show（）；
其他的
$（'ol>li:first'）.show（）；
});
});
显示
#一,
#二,
#三,
#四,
#五,
#六,

这是可行的，但我很确定这是可以优化的。最好的办法是什么

---

提前谢谢

您可以将节目改为单行：

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

工作示例-

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

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

---

工作示例-

您可以将显示改为单行：

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

工作示例-

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

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

工作示例-

工作示例

工作示例

$（文档）.ready（函数（）{
变量$liList=$（'ol>li'）；
$liList.hide（）；
$（“按钮”）。单击（函数（）{
var$first=$liList.filter（“：first”）
如果（$first.is（':visible'））
$liList.filter（“：visible:last”）.next（）.show（）；
其他的
$first.show（）；
});
});

$（文档）.ready（函数（）{
变量$liList=$（'ol>li'）；
$liList.hide（）；
$（“按钮”）。单击（函数（）{
var$first=$liList.filter（“：first”）
如果（$first.is（':visible'））
$liList.filter（“：visible:last”）.next（）.show（）；
其他的
$first.show（）；
});
});

我使用css

转换延迟

属性来表示该属性，并使用SCS为每个

元素递增该属性

为了显示

，我使用JS只是设置类

show

，它负责不透明度的更改

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

$（'.show'）。单击（函数（）{
$（'ul'）.toggleClass（'show'）；
})

li:n个孩子（1）{
转换延迟：0s；
}
李：第n个孩子（2）{
过渡延迟：0.3s；
}
李：第n个孩子（3）{
过渡延迟：0.6s；
}
李：第n个孩子（4）{
过渡延迟：0.9秒；
}
李：第n个孩子（5）{
过渡延迟：1.2s；
}
李：第n个孩子（6）{
过渡延迟：1.5s；
}
李：第n个孩子（7）{
过渡延迟：1.8s；
}
李：第n个孩子（8）{
过渡延迟：2.1s；
}
李：第n个孩子（9）{
过渡延迟：2.4s；
}
李：第n个孩子（10）{
过渡延迟：2.7s；
}
ul>li{
不透明度：0；
过渡：不透明度；
}
ul.show>li{
不透明度：1；
}

显示

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

我使用css

转换延迟

属性为该元素和SCS为每个

元素增加它

为了显示

，我使用JS只是设置类

show

，它负责不透明度的更改

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

$（'.show'）。单击（函数（）{
$（'ul'）.toggleClass（'show'）；
})

li:n个孩子（1）{
转换延迟：0s；
}
李：第n个孩子（2）{
过渡延迟：0.3s；
}
李：第n个孩子（3）{
过渡延迟：0.6s；
}
李：第n个孩子（4）{
过渡延迟：0.9秒；
}
李：第n个孩子（5）{
过渡延迟：1.2s；
}
李：第n个孩子（6）{
过渡延迟：1.5s；
}
李：第n个孩子（7）{
过渡延迟：1.8s；
}
李：第n个孩子（8）{
过渡延迟：2.1s；
}
李：第n个孩子（9）{
过渡延迟：2.4s；
}
李：第n个孩子（10）{
过渡延迟：2.7s；
}
ul>li{
不透明度：0；
过渡：不透明度；
}
ul.show>li{
不透明度：1；
}

显示

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

这个问题可能更适合将变量设置为显示的最后一项，而不是使用选择器。@David谢谢，我不知道这个问题。下次我将使用它。这个问题可能更适合将变量设置为显示的最后一项，而不是使用选择器。@David谢谢，我不知道这个问题。下一次我会用它。逻辑是一样的。只是性能改进。使用同一选择器多次搜索（特别是当元素的数量不会改变时）会减慢jquery的速度。@Kevin Bowersox提供的解决方案也很好。只要使用filter方法也可以获得更好的性能。只是性能改进。使用同一选择器多次搜索（特别是当元素的数量不会改变时）会减慢jquery的速度。@Kevin Bowersox提供的解决方案也很好。只需使用filter method就可以在那里获得更好的性能。谢谢，这正是我想要的。

$（'button'）。单击（function（）{$（$（this.data（'target'））.children（）.filter（':hidden:first'）.show（）；}）

使用按钮上的

data target=“.target”

。@如果我想隐藏最后一项而只显示当前项，该怎么办。例如：如果我第二次单击show，它应该隐藏第一个

li

项，并且只显示第二个

li

项。谢谢，这正是我要查找的内容。

$（'button'）。单击（function（）{$（$（this.data（'target'））.children（）.filter（':hidden:first'）。show（）；）

使用按钮上的

data target=“.target”

。@如果我想隐藏最后一项而只显示当前项，该怎么办。例如：如果我第二次单击show，它应该隐藏第一个

li

项，只显示第二个

li

项。

var$liList=$（'ol>li'）$liList.hide（）$（'button'）。单击（函数（）{$liList.filter（':hidden'）.eq（0.show（）；}）偶数甜菜性能
    $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;
    }