Demo

Question

我尝试使用jquery显示5个列表项（li）。在加载时它应该只显示前5个，然后在单击下一个按钮时，它应显示接下来的5个列表项，并且应隐藏前5个列表项。但是，它不起作用。

$(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/

我想出错的任何想法？

Answer 1

尝试

$(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();
        }
    });

});

演示：Fiddle

Answer 2

Demo

<强> jQuery的：

$(document).ready(function() {

    var $children = $("#myList").children("li"),
        offset = 0,
        display = 5;

    redraw();

    function redraw() {
        $("#myList li").removeClass("hidden");
        $.each($children, function(k, v) {
            if (k < offset || k >= offset + display) $(this).addClass("hidden");            
        });
    }

    $('#next').click(function(){      
        offset += display;
        if (offset > $children.length) offset = $children.length;
        redraw();
    });
    $('#prev').click(function(){
        offset -= display;
        if (offset < 0) offset = 0;
        redraw();
    });    

});

<强> CSS：

.hidden {   
 color: red;
}

Answer 3

$('#next, #prev').click(function () {
    var w = this.id === 'prev' ? 'first' : 'last'
      , $m = $li.filter(':visible')[w]()[this.id + 'All'](":lt(" + x + ")");

    if ( $m.length ) {
       $li.hide();
       $m.show();
    }      
});

http://jsfiddle.net/479Fr/

Answer 4

解决问题的更通用方法：

小提琴：http://jsfiddle.net/W4Km8/533/

var minPage = 1;
var maxPage = -1;
var currentPage = 1;
var pageSize = 5;

function showCurrentPage() {
    var rangeFrom = (currentPage - 1) * 5;
    var rangeTo = (currentPage) * 5;
    var $liList = $('#myList li').hide();

    $liList.slice(rangeFrom, rangeTo).show();
}

$(document).ready(function () {
    maxPage = parseInt($('#myList li').length / pageSize) + 1;

    showCurrentPage();

    $('#next').click(function () {
        if (currentPage < maxPage) {
            currentPage++;
            showCurrentPage();
        }
    });

    $('#prev').click(function () {
        if (currentPage > minPage) {
            currentPage--;
            showCurrentPage();
        }
    });
});

使用Jquery一次仅显示5 li（列表项）

4 个答案:

Demo