如何使用jQuery在每次点击中选择下一个'n'个连续元素? [英] How to select next 'n' consecutive elements on every click using jQuery?
本文介绍了如何使用jQuery在每次点击中选择下一个'n'个连续元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用jQuery在每次点击中选择下一个'n'个连续元素?
在下面的示例中,我想选择第一个按钮单击"的前4个li元素,第二个单击按钮的下4个和第3个单击按钮的下4个,最多为'n'个数字.
How to select next 'n' consecutive elements on every click using jQuery?
In below example, I want to select the first 4 li elements on first button click, next 4 on 2nd click and next 4 on 3rd Click, upto 'n' numbers.
$(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>
推荐答案
您可以创建一个初始化为0
的变量,并将该变量增加4
,使用.slice()
选择n个元素
You can create a variable initialized to 0
and increment the variable by 4
, use .slice()
to select n elements
$(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>
这篇关于如何使用jQuery在每次点击中选择下一个'n'个连续元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文