Jquery列表在单击时显示/隐藏5项
Jquery列表在单击时显示/隐藏5项
提问于 2011-07-09 22:45:09
我对列表有一个jquery问题。我有一个很大的列表，我想当一个链接被点击时；每次都会显示该列表的下5个项目，而前面的项目会隐藏起来。
我该怎么做呢？
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>Onload这应该显示为：
1
2
3
4
5当点击“下一步”
6
7
8
9
10当点击“下一步”
11
12
13
14
15提前感谢！
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-07-09 23:08:24
这里有一个选项：http://jsfiddle.net/JQq5n/
不知道如何/是否计划显示之前的项目，所以我没有提到
Stack Overflow用户
发布于 2011-11-13 20:05:33
此解决方案更短，也可用于双向(Previous和Next)。
小提琴：
$('ul li:gt(4)').hide();
$('.prev').click(function() {
var first = $('ul').children('li:visible:first');
first.prevAll(':lt(5)').show();
first.prev().nextAll().hide()
});
$('.next').click(function() {
var last = $('ul').children('li:visible:last');
last.nextAll(':lt(5)').show();
last.next().prevAll().hide();
});Stack Overflow用户
发布于 2011-07-09 22:54:16
这是未经测试的代码，但我认为它会让您朝着正确的方向前进。
var currentShowingSet = 1;
$('#next').click(function() {
// Hide all.
$('ul li').hide();
// increment currently showing set of items.
currentShowingSet++;
// show the next 5 children of the list.
for(var i = 1; i < 6; i++) {
$('ul li:nth-child(' + (currentShowingSet * i) + ')').show();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6635441
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号