jQueryを使用してクリックするたびに、逆順（降順）で特定の要素から「n」個の連続する要素を選択するにはどうすればよいですか？

Question

jQueryを使用してクリックするたびに、逆順（降順）で特定の要素から「n」個の連続した要素を選択する方法は？以下の例では

は、私は、最初のクリックで三 <li> 4th 4</li> <li> 4th 4</li> <li> 4th 4</li> <li> 4th 4</li>

おかげで <li> 2nd 4</li> <li> 2nd 4</li> <li> 2nd 4</li> <li> 2nd 4</li>

し、2回目のクリックでこれらの、 <li> 1st 4</li> <li> 1st 4</li> <li> 1st 4</li> <li> 1st 4</li>

及びこれらをこれらを（addClass）を選択しますロットは事前に。第3回クリックして、点で最大 'n' の数字上の第二クリックし、次の4の最初のボタンをクリックし、次の4の

$(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 prev 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 class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
</ul>

。

Answer 1

$(document).ready(function(){ 
 
\t var s = 4; 
 
    $(".btn").on('click', function(){ 
 
    \t var n = $("li.selected").first().index(); 
 
    if (n >= 0) { 
 
    \t if ($("li").first().is(".selected") && $("li").last().is(".selected")) { 
 
    \t n = $("li").not(".selected").first().nextAll(".selected").first().index(); 
 
    } 
 
    \t $("li").removeClass("selected"); 
 
    var markStart = n - s; 
 
    if (markStart < 0) { 
 
    \t $("li") 
 
    \t .slice(0, n) 
 
    \t .addClass("selected"); 
 
     
 
     markStart = $("li").length - s + n; 
 
    } 
 
    
 
    $("li") 
 
    .slice(markStart, markStart + s) 
 
    .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 prev 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 class="selected"> 2nd 4</li> 
 
    <li class="selected"> 2nd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 3rd 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 5th 5</li> 
 
</ul>

Answer 2

以下のコードを確認してください。それがあなたのために働くことを望みます！

$(document).ready(function() { 
 
var n = 0; 
 
    $(".btn").on('click', function(){ 
 
    if (n > $("li").length) 
 
    \t n=$("li").length+1; 
 
    else 
 
    \t n=$("li.selected:eq(1)")?$("li.selected:eq(1)").index():n; 
 
    $("li") 
 
    .removeClass("selected") 
 
    .slice(n-5, n-1) 
 
    .addClass("selected"); 
 
    if (n <= 5 || n > $("li").length) 
 
    { 
 
    n = n <= 5 ? $("li").length+1: $("li").length-4; 
 
    } 
 
    }); 
 
});

.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/2.1.1/jquery.min.js"></script> 
 
<a class="btn">select prev 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 class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li class="selected"> 3rd 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
    <li> 4th 4</li> 
 
</ul>