通過多個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() 
    }); 
});