在这种情况下如何更改下三个兄弟姐妹的班级？

Question

在这种情况下如何更改下三个兄弟姐妹的班级？ 我想创建分页（每个页面上有3个元素）。

<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

这是一个办法做到这一点，例如移动到下一个页面：

$(".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 

请注意，这并没有考虑到时会发生什么你已经在最后一页了 - 你可以在.nextAll()或其他等价物后检查.length来检测。

Answer 2

这是背部和限制检查转发：

$('button').on('click', function() { 

    var next = $(this).data().dir === 'next' ?   
     Math.min(currentPage + 1, numPages - 1) : 
     Math.max(currentPage - 1, 0); 

    load(currentPage = next);  
}); 

var load = function (page) { 
    items.removeClass('shown'); 
    items.slice(page * pageSize, page * pageSize + pageSize).addClass('shown');; 
}; 

http://jsfiddle.net/stto3703/44Nn9/