使用Jquery一次僅顯示5 li（列表項）

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

});

演示： 小提琴

Answer 2

演示版

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