如何使用jQuery在每次点击时选择下一个'n'连续元素？答案

【问题标题】：How to select next 'n' consecutive elements on every click using jQuery?如何使用jQuery在每次点击时选择下一个'n'连续元素？
【发布时间】：2018-04-15 16:16:20
【问题描述】：

如何使用 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>

【问题讨论】：

第二次点击之前选择的元素是否应该保留添加的className？当 n 个元素被选中时会发生什么？
谢谢！应取消选择先前选择的元素。在我的情况下，选择是添加一个类。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

您可以创建一个初始化为0 的变量并将变量递增4，使用.slice() 选择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>

【讨论】：