jQuery plus lt selector

Question

I'm currently trying to write a jquery script that shows only the first 5 list items. What is bothering me is how to make the script show next 5 elements if you click on the loadmore button. Below is the jquery code i am working with. I guess that i need to add plus 5 to the variable x, but i don't know how to do that correclty, and make the next 5 list items show.

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(){

            })
    })
});

Any suggestions? :)

Answer 1

Just get the index of the last visible LI, and another 5 to show

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