通过多个ul列表jquery分页

Question

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

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

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

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