如何 select 'n' 来自特定元素的连续元素在每次点击时使用 jQuery 以反向（降序）顺序排列？

Question

如何使用jQueryselect'n'每次点击时特定元素的连续元素以相反（降序）顺序排列？

在下面的例子中，我想在第一次点击时 select(addClass) 这些， <li> 2nd 4</li> <li> 2nd 4</li> <li> 2nd 4</li> <li> 2nd 4</li>

第二次点击时， <li> 1st 4</li> <li> 1st 4</li> <li> 1st 4</li> <li> 1st 4</li>

还有这些在第三 <li> 4th 4</li> <li> 4th 4</li> <li> 4th 4</li> <li> 4th 4</li>

非常感谢。

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

第一次点击按钮，第二次点击接下来的 4 个，第三次点击接下来的 4 个，最多 'n' 个。

Answer 1

检查下面的代码。希望对你有用！！

$(document).ready(function() {
var n = 0;
  $(".btn").on('click', function(){
  if (n > $("li").length)
   n=$("li").length+1;
  else
   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>

Answer 2

$(document).ready(function(){
 var s = 4;
  $(".btn").on('click', function(){
   var n = $("li.selected").first().index();
    if (n >= 0) {
   if ($("li").first().is(".selected") && $("li").last().is(".selected")) {
     n = $("li").not(".selected").first().nextAll(".selected").first().index();
    }
   $("li").removeClass("selected");
    var markStart = n - s;
    if (markStart < 0) {
     $("li")
     .slice(0, n)
     .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>

如何 select 'n' 来自特定元素的连续元素在每次点击时使用 jQuery 以反向（降序）顺序排列？

How to select 'n' consecutive elements from specific element in reverse(descending) order on every click using jQuery?

html

javascript

css

jquery

jquery-selectors