通过多个ul列表进行jQuery分页 [英] jquery pagination through multiple ul lists
本文介绍了通过多个ul列表进行jQuery分页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法使该脚本正常运行.有人能帮我吗?首先,我想让它可以用于多个<div>
和<ul>
元素.
另一件事,我要这样做,以便如果我有5个以上的<li>
元素,它会附加一个下一个"按钮,然后在第2页上,它会附加上一个"和下一个"按钮.另外,如果在最后一页上不显示下一页"按钮.
这是我当前的代码:
I can't get this script to work well. Can someone help me? First, I would like to make it that I can use it for multiple <div>
and <ul>
elements.
One other thing, I would like to make it so that if I have more than 5 <li>
elements it appends a "next" button and then on page 2, it appends "prev" and "next" buttons. Also, if on the last page "next" button shouldn't be seen.
Here is my current code:
$('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/
推荐答案
您可以执行以下操作( Fiddle ):
You can do something like this (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'));
});
});
这篇关于通过多个ul列表进行jQuery分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文