使用jQuery為每個第一，第二和第三個元素提供一個唯一的類

Question

我正在使用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');
    }
}

有一種簡單的方式，我在看？

Answer 1

這應該做你想要的

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

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

---

工作演示

 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> 

Answer 2

您需要使用模數運算符，但首先要了解它的工作原理：

當且僅當b除以ac時，a％b才返回c，換句話說，c是超過b的歐幾里德除法的其余部分。

現在這將工作：

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

Answer 3

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

});

Answer 4

由於這些元素不是同一個父元素的子元素，所以你應該嘗試這樣的東西。

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