Javascript 使用jQuery为每个第一、第二和第三个元素提供一个唯一的类

我使用jQuery选择器返回对象

例如

var target=$（'.target'）将返回6个对象

这些对象没有相同的父对象

我想给每个对象类如下：

target[0].addClass('top');
target[1].addClass('middle');
target[2].addClass('low');
target[3].addClass('top');
target[4].addClass('middle');
target[5].addClass('low');

等等。。。我想我可以用一些模数。我知道以下是错误的

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');
    }
}

有没有一种简单的方法可以让我看一下？
您需要使用模运算符，但首先要了解它是如何工作的：

当且仅当b除以a-c，或者换句话说，c是a除以b的欧几里得除法的其余部分时，a%b返回c

现在这将起作用：

target.each(function(index){
    if (index % 3 === 0) {
      $(this).addClass('low');
    } else if(index % 3 === 1) {
      $(this).addClass('middle');
    } else {
      $(this).addClass('top');
    }
}

这应该是你想要的

var classes = ['top', 'middle', 'low'];

target.each(function(index){
    $(this).addClass( classes[index % 3] );
}


工作演示


var类=['top'，'middle'，'low']；
$（函数（）{
var target=$（'.target'）；
目标。每个（功能（索引）{
$（this）.addClass（类[索引%3]）；
});
});
.top{
颜色：红色；
}
.中{
颜色：绿色；
}
.低{
颜色：青色；
}

1.
2.
3.
4.
5.
6
jQuery的方法会增加索引本身，因此不需要进行增量

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;
    }

});

由于这些元素不是同一父元素的子元素，因此您应该尝试类似的方法

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

前1名
中间1
低1
前2名
中间2
低2
$（'div:nth child（3n+1）'）.addClass（“top”）；
$（'div:nth child（3n+2）'）.addClass（“middle”）；
$（'div:nth child（3n+3）'）.addClass（“低”）；
target.addClass（函数（idx）{return classes[idx%3]；]）
：-）虽然它们不共享同一个父级，
nth-child（）
可能仍然可以使用。这一切都取决于标记……并且您的代码应该是正确的，只是您需要为每个代码保留相同的
%3
，但与
0
、
1
和
2
进行比较。