How to change class of next 3 siblings in this case?

Question

How to change class of next 3 siblings in this case? I want to create pagination (3 elements on each page).

<button id="leftbutton"><</button>
<ul id="basepattern">
  <li class="baseshown">1</li>
  <li class="baseshown">2</li>
  <li class="baseshown">3</li>
  <li class="basehidden">4</li>
  <li class="basehidden">5</li>
  <li class="basehidden">6</li>
  <li class="basehidden">7</li>
  <li class="basehidden">8</li>
  <li class="basehidden">9</li>
</ul>
<button id="rightbutton">></button>

http://jsfiddle.net/KDyC9/

base_nextpage: function() {
   $(".baseshown").addClass("basehidden");
     $(".baseshown").nextAll(".basehidden:lt(3)").addClass("baseshown");
},

Answer 1

This is one way to do it, for example to move to the next page:

$(".baseshown")
    .toggleClass("baseshown basehidden")  // toggle currently visible elements
    .last().nextAll().slice(0, 3)         // get elements that go into next page
    .toggleClass("baseshown basehidden"); // and toggle those as well

Note that this does not take into account what happens when you are already on the last page -- you can detect this by checking the .length after .nextAll() or some other equivalent.