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