使用jQuery来限制列表元素的数量

Question

使用jQuery来限制列表元素的数量

reb*_*ion 6 jquery list limit

我有一个列表元素,包含20-30个事件之间的数量.我只想展示其中的5个,并有一个«更多»链接我可以点击观看接下来的五个.如果附加五个下一个事件并不重要.

找不到实际执行此操作的jQuery脚本,或者我只是盲目？我不想使用旋转木马插件或类似的东西.

Answer 1

Dam*_*kić 6

好吧,幸运的是,对于我们编写食物和名望代码的程序员来说,并非所有可以想象的功能都已编写为插件:)

但这很容易:

var from = 0, step = 5;

function showNext(list) {
  list
    .find('li').hide().end()
    .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
      .show();
  from += step;
}

function showPrevious(list) {
  from -= step;
  list
    .find('li').hide().end()
    .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
      .show();
}

// show initial set
showNext($('ul'));

// clicking on the 'more' link:
$('#more').click(function(e) {
  e.preventDefault();
  showNext($('ul'));
});

Run Code Online (Sandbox Code Playgroud)

当然,这可以更好地提取到类似插件的功能中,但我会将其作为读者的练习;)

Answer 2

cle*_*tus 6

<html>
<head><title>Test</title></head>
<body>
<ul class="more">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  $("ul.more").each(function() {
    $("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
    $("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
  });
  $("li.more a").live("click", function() {
    var li = $(this).parents("li:first");
    li.parent().children().show();
    li.remove();
    return false;
  });
});
</script>
</script
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

基本上这是做什么的:

隐藏第6个及后续列表项;
在第5个之后插入一个列表项"更多......";
使用实时事件向"更多..."链接添加事件处理程序,以便在单击它们时显示该列表中的所有列表项,然后自行删除.

编辑:修正了一些小错误.以上是一个完全可行的示例(只需确保jquery链接正确).

归档时间：	16 年，7 月前
查看次数：	17129 次
最近记录：	15 年，1 月前