[英]Give every first, second and third element a unique class using jQuery
I'm using a jQuery selector to return objects. 我正在使用jQuery选择器来返回对象。
For example var target = $('.target');
例如var target = $('.target');
will return 6 objects. 将返回6个对象。
The objects do not have the same parent. 对象没有相同的父对象。
I want to give each object classes like so: 我想给每个对象类如下:
target[0].addClass('top');
target[1].addClass('middle');
target[2].addClass('low');
target[3].addClass('top');
target[4].addClass('middle');
target[5].addClass('low');
And so on... I thought I could use some modulus. 等等......我以为我可以使用一些模数。 I know the following is wrong. 我知道以下是错的。
target.each(function(index){
index += 1;
if (index % 3 === 0) {
$(this).addClass('low');
} else if(index % 2 === 0) {
$(this).addClass('middle');
} else {
$(this).addClass('top');
}
}
Is there an easy way that i'm over looking? 有一种简单的方式,我在看?
This should do what you want 这应该做你想要的
var classes = ['top', 'middle', 'low'];
target.each(function(index){
$(this).addClass( classes[index % 3] );
}
Working demo 工作演示
var classes = ['top', 'middle', 'low']; $(function() { var target = $('.target'); target.each(function(index) { $(this).addClass(classes[index % 3]); }); });
.top { color: red; } .middle { color: green; } .low { color: cyan; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="target">1</div> <div class="target">2</div> <div class="target">3</div> <div class="target">4</div> <div class="target">5</div> <div class="target">6</div>
You need to use the modulus operator, but first understand how it works: 您需要使用模数运算符,但首先要了解它的工作原理:
a % b returns c if and only if b divides ac, or in other words c is the rest of the euclidian division of a over b. 当且仅当b除以ac时,a%b才返回c,换句话说,c是超过b的欧几里德除法的其余部分。
Now this will work : 现在这将工作:
target.each(function(index){
if (index % 3 === 0) {
$(this).addClass('low');
} else if(index % 3 === 1) {
$(this).addClass('middle');
} else {
$(this).addClass('top');
}
}
jQuery's .each()
method increments the index itself, so you don't need to do the incrementation. jQuery的.each()
方法增加索引本身,因此您不需要进行增量。
var target = $('.target');
target.each(function (i, el) {
switch (i % 3) {
default:
break;
case 0:
$(this).addClass("top")
break;
case 1:
$(this).addClass("middle")
break;
case 2:
$(this).addClass("bottom")
break;
}
});
As this elements aren't children of the same parent, you should try something like this. 由于这些元素不是同一个父元素的子元素,所以你应该尝试这样的东西。
<div>Top 1</div>
<div>Middle 1</div>
<div>Low 1</div>
<div>Top 2</div>
<div>Middle 2</div>
<div>Low 2</div>
<script>
$('div:nth-child(3n+1)').addClass("top");
$('div:nth-child(3n+2)').addClass("middle");
$('div:nth-child(3n+3)').addClass("low");
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.