在這種情況下如何更改下三個兄弟姐妹的班級？

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/