javascript - 在这种情况下如何更改下 3 个 sibling 的类(class)？

Question

在这种情况下如何更改接下来的 3 个 sibling 的类别？ 我想创建分页(每页 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 来检测这一点> 或其他一些等价物。