通过多个ul列表进行jquery分页答案

【问题标题】：jquery pagination through multiple ul lists通过多个ul列表进行jquery分页
【发布时间】：2014-05-14 00:20:37
【问题描述】：

我无法让这个脚本正常工作。有人能帮我吗？首先，我想让它可以用于多个<div> 和<ul> 元素。另一件事，我想这样做，如果我有超过 5 个<li> 元素，它会附加一个“下一个”按钮，然后在第 2 页上附加“上一个”和“下一个”按钮。此外，如果在最后一页上不应看到“下一步”按钮。这是我当前的代码：

 $('div').each(function(){
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

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

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

});

工作示例http://jsfiddle.net/e6sP7/3/

【问题讨论】：

标签： jquery pagination html-lists elements

【解决方案1】：

你可以这样做 (Fiddle)：

function check_navigation_display(el) {
    //accepts a jQuery object of the containing div as a parameter
    if ($(el).find('ul').children('li').first().is(':visible')) {
        $(el).children('.prev').hide();
    } else {
        $(el).children('.prev').show();
    }

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

$('div').each(function () {
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    check_navigation_display($(this));

    $(this).find('.next').click(function () {
        var last = $(this).siblings('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
        check_navigation_display($(this).closest('div'));
    });

    $(this).find('.prev').click(function () {
        var first = $(this).siblings('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
        check_navigation_display($(this).closest('div'));
    });
});

【讨论】：

非常好，正是我需要的，tnx！

【解决方案2】：

只需缓存您对例如的引用var foo = $(this); 所以它指向正确的组，你很好。更新您的第一个和最后一个引用以使用 foo 和 var last = $('ul',foo).children('li:visible:last');：

jsFiddle example

$('div').each(function () {
    var foo = $(this);
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();
    $(this).find('.next').click(function () {
        var last = $('ul',foo).children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
    });
    $(this).find('.prev').click(function () {
        var first = $('ul',foo).children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
    });
});

【讨论】：