javascript - リストの n 個のアイテムのセクション

Question

各クリック機能で 3 つの li を選択する必要があります。最初の 3 つを除くすべての lis を非表示にする必要があります。クリック機能では、最初の 3 つの li を非表示にし、次の 3 つの項目を表示する必要があります。それはどのように可能ですか？

Answer 1

リスト項目を表示するために、リストでjquery:lt()とセレクターの両方を組み合わせて使用​​できます。:gt()

マークアップ:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>    
    <li>12</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>​

jQuery:

$('ul li:gt(2)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(3)').show();
    first.prev().nextAll().hide()
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(3)').show();
    last.next().prevAll().hide();
});

デモ: http://jsfiddle.net/kRUUE/

Answer 2

jquery:lt()セレクターを使う

このフィドルをチェックしてください