Question

我目前正在尝试编写一个只显示前5个列表项的jquery脚本。困扰我的是如果单击loadmore按钮，如何使脚本显示接下来的5个元素。下面是我正在使用的jquery代码。我想我需要在变量x中添加加5，但我不知道如何做到这一点，并且显示下一个5个列表项。

Fiddle for complete code

jQuery(document).ready(function () {
    jQuery('.layered-items').each(function(){
        var size = jQuery(this).find('li').length;
        var x = 5;
        jQuery('li:lt('+x+')', this).show(); 

            jQuery('.loadmore-filter').click(function(){

            })
    })
});

有什么建议吗？：）

Answer 1

只需获取最后一个可见LI的索引，再显示另外5个

jQuery(function($) {
    $('.layered-items').each(function(){
        var x = 5;
        $('li:lt('+x+')', this).show(); 
    });
    $('.loadmore-filter').click(function(){
        var ul = $(this).closest('span').prev('ul'),
            x  = $('li:visible:last', ul).index(),
            y  = x + 6;
        $('li:lt('+y+'):gt('+x+')', ul).show();
    });
});

FIDDLE

jQuery加上lt选择器

1 个答案: