2014-05-13 47 views
0

我無法讓這個腳本正常工作。有人能幫我嗎?首先,我想讓它可以用於多個<div><ul>元素。 另一件事,我想這樣做,如果我有超過5個<li>元素附加一個「下一個」按鈕,然後在第2頁上,它追加「prev」和「下一個」按鈕。另外,如果在最後一頁上的「下一步」按鈕不應該被看到。 這裏是我當前的代碼:通過多個ul列表jquery分頁

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

回答

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

外觀極好,正是我需要的,TNX! – user3278890

1

只是緩存您參考例如var foo = $(this);所以它指向適當的組,你很好。更新你的第一個和最後一個參考使用foovar 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() 
    }); 
}); 
+0

也是很好的例子,tnx! – user3278890