Infinite Scroll: show elements between a range

Question

On my page I have 16 elements. Initially only 4 are showing and the rest 5-16 are hidden on the page. On page load I am using the :gt selector to hide everything beyond my 'post per page' number which is set to 4.

this.ppp    = 4;
this.count  = this.ppp - 1;
$('li.item:gt(' + this.count + ')').addClass('hide');

When I initiate an Infinite Scroll event, by scrolling to the bottom of the page, how can I find all the elements between the range 5-8, and then on the next event find elements between 9-12 and so on based on my posts per page value.

I tried using the .nextUntil() and :eq but using the :eq method returns an object and nextUntil() requires a string like 'li.item'.

this.count += this.ppp;
var eq = $("ul.items li.item").eq(this.count);
$('ul.items).nextUntil(' + eq  + ')').addClass('show');

Probably a better more efficient way to approach this just looking for some ideas.

thanks

Answer 1

To show the hide items it's better to use this:

$('li.item.hide:lt(' + this.ppp + ')').removeClass('hide');

Instead all this:

this.count += this.ppp;
var eq = $("ul.items li.item").eq(this.count);
$('ul.items).nextUntil(' + eq  + ')').addClass('show');

Check this minimal example: https://jsfiddle.net/lmgonzalves/q9oh7eb9/