jQuery를 사용하여 클릭 할 때마다 다음 'n'개의 연속 요소를 선택하는 방법은 무엇입니까?

Question

jQuery를 사용하여 클릭 할 때마다 다음 'n'개의 연속 요소를 선택하는 방법은 무엇입니까?

아래 예에서 첫 번째 버튼 클릭시 첫 번째 4 li 요소를 선택하고 두 번째 클릭시 다음 4 개를 선택하고 세 번째 클릭시 다음 4 개를 클릭하십시오. 'n'개까지 클릭하십시오. 두 번째 클릭에서

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