jQueryを使用してクリックごとに次のn個の連続する要素を選択するにはどうすればよいですか？

Question

jQueryを使用してクリックごとに次のn個の連続する要素を選択するにはどうすればよいですか？

以下の例では、最初のボタンのクリックで最初の4つの要素を選択し、次に2番目のクリックで4番目の要素を選択し、次に3番目の要素で4番目の要素を選択します。もう一度クリックで

$(document).ready(function(){ 
 
    $(".btn").on('click', function(){ 
 
    $("li:nth-child(-n+4)").addClass("selected"); 
 
    }); 
 
});

.btn{ text-decoration:none; background:blue; color:#fff; padding:5px; border-radius:4px;float:left;} 
 
ul{ list-style:none;float:left;clear:both;} 
 
ul li{ padding:5px;background:#555; color:#fff; float:left; border-radius:2px; margin:2px; } 
 
.selected{ background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a class="btn">select next 4 consecutive elements</a> 
 
<ul> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
</ul>

Answer 1

あなたが選択するために.slice()を使用し、0に初期化変数を作成し、4で変数をインクリメントすることができますn個の要素

$(document).ready(function(){ 
 
    var n = 0; 
 
    $(".btn").on('click', function(){ 
 
    $("li") 
 
    .removeClass("selected") 
 
    .slice(n, n += 4) 
 
    .addClass("selected"); 
 
    if (n >= $("li").length) n = 0; 
 
    }); 
 
});

.btn{ text-decoration:none; background:blue; color:#fff; padding:5px; border-radius:4px;float:left;} 
 
ul{ list-style:none;float:left;clear:both;} 
 
ul li{ padding:5px;background:#555; color:#fff; float:left; border-radius:2px; margin:2px; } 
 
.selected{ background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a class="btn">select next 4 consecutive elements</a> 
 
<ul> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 1st 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 2nd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
</ul>