Jquery: create pager(next - prev button) for new data

Question

I am using ajax to load more posts. For example.

I already have post like:

 <div class='post'>post1</div>
 <div class='post'>post2</div>
 <div class='post'>post3</div>

After press Next Posts button I receive new data:

 <div class='post'>post1</div>
 <div class='post'>post2</div>
 <div class='post'>post3</div>
 <div class='post'>post4</div>
 <div class='post'>post5</div>
 <div class='post'>post6</div>

But I only want new data appeared and the old data is hidden.

It means i can back old posts by Prev Posts Button. How can I use Jquery to do that?

Thank for your help.

Answer 1

Ex if you want to display 5 posts:

  //in you "nextButton" event handler
  var postLength = $('.post').length;
  $('.post')[postLength - 5].hide();

On your prevButton you will have to track where in the list you are, and show the posts as you cycle back through the list and then detect when you have reached the point where you load new things when you hit the nextButton.