客户端分页

Question

I have N number of html elements. Is it possible to hide the N - 10 bottom elements with jQuery and then create a "Load more" button to show another 10 elements?

I mean that when the page loads, only the 10 first elements should be visible, and when I click "Load more", the 20 first elements is visible, and when I click again, the 30 first elements is visible, etc.

Would it be something like

$('li').slice(-($('li').length - 10)).hide();

and then

var num_visible = 10;
$('#loadMore').click(function () {
  $('li').slice(num_visible, num_visible + 10).show();
  num_visible += 10;
});

Answer 1

You might need to add some further validation – this just shows the general idea – for your specific use case, but would something like this work?

var currShowing = 10;
changeShowing()
function changeShowing() {
 $('div').each(function(index, value) {
    if (index < currShowing - 1 ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  })   
}

function showMore() {
  currShowing += 10;
  changeShowing();
}

http://codepen.io/mwvanmeurs/pen/VPoORq