使用Jquery一次仅显示5 li(列表项) [英] Display only 5 li (list items) at one time using Jquery

问题描述

我正在尝试使用jquery显示5个列表项(li).加载时，它应该仅显示前5个，然后单击下一步"按钮，它应显示下5个列表项，而前5个列表项应隐藏.但是，它不能正常工作.

I'm trying to display 5 list items(li) using jquery. On load it should show only first 5, and then on clicking next button, it should show next 5 list items and the previous 5 list items should be hidden. But, however, its not working.

$(document).ready(function() {
    $('#myList li:lt(5)').show();
    var size_li = $("#myList li").size();
    alert(size_li);
    var x = 5;
    $('#next').click(function(){      
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();        
    });
    $('#prev').click(function(){

    });

});

我的JS小提琴是 http://jsfiddle.net/W4Km8/518/

有什么想法我要去哪里错吗?

Any thoughts where I'm going wrong?

推荐答案

尝试

$(document).ready(function () {
    var $lis = $("#myList li").hide();
    $lis.slice(0, 5).show();
    var size_li = $lis.length;
    var x = 5,
        start = 0;
    $('#next').click(function () {
        if (start + x < size_li) {
            $lis.slice(start, start + x).hide();
            start += x;
            $lis.slice(start, start + x).show();
        }
    });
    $('#prev').click(function () {
        if (start - x >= 0) {
            $lis.slice(start, start + x).hide();
            start -= x;
            $lis.slice(start, start + x).show();
        }
    });

});

演示:小提琴

这篇关于使用Jquery一次仅显示5 li(列表项)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！