Question

我正在尝试使用jquery限制列表项数量的上一篇文章，我需要隐藏下一个/上一个链接到达列表末尾。我确信这是一个简单的补充，但我似乎无法找到增强此功能的解决方案。

这是函数:(从Jquery list show / hide 5 items onclick复制）

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

这是jsfiddle：http://jsfiddle.net/JQq5n/61/

我需要帮助隐藏下一个/上一个链接，当它传播到列表的末尾时。有没有人这样做过？

Answer 1

这是小提琴http://jsfiddle.net/RNrgE/1/

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    if(first.prevAll().length < 6){
         $('.prev').hide();   
    }
    first.prev().nextAll().hide();
    $('.next').show(); //Now there must be items below so make sure the next link is visible
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    if(last.nextAll().length < 6){ //We've reached the end so hide the links
        $('.next').hide();
    }
    $('.prev').show(); //Now there must be items above so make sure the prev link is visible
    last.next().prevAll().hide(); 
});

Answer 2

试试这个Updated Demo。

如果下一个和上一个案例中都没有显示剩余项目，则隐藏上游和下一个链接。

function doShowNextPrev(){
    if($('ul li:first').is(':visible'))
        $('.prev').hide();
    else
        $('.prev').show();    

    if($('ul li:last').is(':visible'))
        $('.next').hide();
    else
        $('.next').show();    
}

添加了以下有趣内容，以检查是否显示next和prev链接。需要在doReady上调用以上内容，并且单击next和prev。

Answer 3

$('ul li:gt(4)').hide();

updateButtons();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
    updateButtons();    
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
    updateButtons();    
});

function updateButtons () {
    var list$ = $('ul');
    $('.prev, .next').show();
    if (list$.children('li:first').is(':visible')) {
        $('.prev').hide();
    }
    if (list$.children('li:last').is(':visible')) {
        $('.next').hide();
    }
}

隐藏下一个/上一个功能链接

3 个答案: