Javascript 如何使用jquery显示特定数量的li？

我想显示3个

li

，1秒后，这3个

li

将向上滑动，下一个3个

li

将自动显示在

分区中。#content

<div id="content">
    <ul>
        <li>122</li>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>

122
首先
第二
第三
第四
第五
第六

我尝试使用

设置超时

功能切换，但它确实满足了我的要求。我知道这个问题对某人来说可能很愚蠢，但我相信我真的需要你的指导，请指导我如何完成这项任务。如果有人指导我，我将不胜感激。我不想使用任何插件

您可以尝试以下方法：

$("li").hide();  // this will hide all li first
$('ul li:lt(3)').show(); // this will display first 3 li from all li

您可以尝试以下方法：

$("li").hide();  // this will hide all li first
$('ul li:lt(3)').show(); // this will display first 3 li from all li

实现这一点的更好方法（不是语义方法，而是）是每3个

包装一次，然后遍历它们。一种方法是：

$（函数（）{
var lis=$（“ul>li”）；
对于（变量i=0；i


122
首先
第二
第三
第四
第五
第六

实现这一点的更好方法（不是语义方法，而是）是将每3个
进行包装，然后遍历它们。一种方法是：


$（函数（）{
var lis=$（“ul>li”）；
对于（变量i=0；i


122
首先
第二
第三
第四
第五
第六

您可以使用和伪选择器


var i=2，
$ul=$（“#内容ul”），
int=setInterval（函数（）{
$（'li'，$ul）.slideUp（）；
$（'li:gt（'+i+'）：lt（3）$ul.slideDown（）；
i+=3；
如果（i+1>=$（'li'，$ul）.length）clearInterval（int）；
},
2000）
#内容ul li:n个孩子（n+4）{
显示：无
}


122
首先
第二
第三
第四
第五
第六
首先
第二
第三
第四
第五
第六

您可以使用和伪选择器


var i=2，
$ul=$（“#内容ul”），
int=setInterval（函数（）{
$（'li'，$ul）.slideUp（）；
$（'li:gt（'+i+'）：lt（3）$ul.slideDown（）；
i+=3；
如果（i+1>=$（'li'，$ul）.length）clearInterval（int）；
},
2000）
#内容ul li:n个孩子（n+4）{
显示：无
}


122
首先
第二
第三
第四
第五
第六
首先
第二
第三
第四
第五
第六

你可以这样做

$("#content ul li").hide();
i = 0;
setInterval(function() {
  i = (i + 3) % $("#content ul li").length;
  $("#content > ul >li").slideUp();
  $("#content > ul >li:gt(" + i + ")").slideDown();
  $("#content > ul >li:gt(" + (i + 3) % $("#content ul li").length + ")").hide();
}, 1000);

你可以这样做

$("#content ul li").hide();
i = 0;
setInterval(function() {
  i = (i + 3) % $("#content ul li").length;
  $("#content > ul >li").slideUp();
  $("#content > ul >li:gt(" + i + ")").slideDown();
  $("#content > ul >li:gt(" + (i + 3) % $("#content ul li").length + ")").hide();
}, 1000);

这里还有另一种可能性：


var步骤=3；
$（函数tick（）{
setTimeout（函数（）{
变量top='-='+（步骤*31）+'px'；
var lis=$（'li:lt（'+steps+'））；
var clones=lis.clone（）.appendTo（'ul'）；
美元。什么时候(
$（'li'）。设置动画（{top:top}，'slow'））
).done（函数（）{
克隆。删除（）；
附加物（“ul”）；
$（'li'）.css（'top'，'auto'）；
勾选（）；
});
}, 1000);
});
*{
填充：0；
保证金：0；
}
保险商实验室{
溢出：隐藏；
高度：92px；
}
李{
显示：块；
位置：相对位置；
线高：30px；
填充：0 10px；
背景：DDD；
边缘底部：1px；
}

A
B
C
D
E
F
G
H
这里是另一种可能性：


var步骤=3；
$（函数tick（）{
setTimeout（函数（）{
变量top='-='+（步骤*31）+'px'；
var lis=$（'li:lt（'+steps+'））；
var clones=lis.clone（）.appendTo（'ul'）；
美元。什么时候(
$（'li'）。设置动画（{top:top}，'slow'））
).done（函数（）{
克隆。删除（）；
附加物（“ul”）；
$（'li'）.css（'top'，'auto'）；
勾选（）；
});
}, 1000);
});
*{
填充：0；
保证金：0；
}
保险商实验室{
溢出：隐藏；
高度：92px；
}
李{
显示：块；
位置：相对位置；
线高：30px；
填充：0 10px；
背景：DDD；
边缘底部：1px；
}

A
B
C
D
E
F
G
H
你能分享你需要的JS吗？你能分享你需要的JS吗？如果你有20个
li
@ZakariaAcharki只是为了演示…：）@ZakariaAcharki我同意你的观点question@ayazkhan你想看到实现这一目标的最佳方式吗？您需要将每组
包装在另一个包装器中。更不用说您还需要使用语义布局。您不能在
和
之间拥有任何东西。您确定@PraveenKumar这是实现这一目标的最佳方式吗？如果您有20个
li
@ZakariaAcharki只是为了演示…：）@扎卡里亚查基一世阿格雷