php - 如何在 jQuery 中将多个类应用于多个 Div

Question

所有图像都将以相同的类别回显。这是我的 php 代码，它与图像相呼应

echo '<img class="my_image" src="data:image/jpeg;base64,' . base64_encode($row['image']) . '">';

所有将回显的图像都有相同的类 my_image 现在我有 4 个不同的动画类 cl0,cl1,cl2,cl3

将通过 php 代码回显的 div 总数是 20，现在我想按升序将这四个类应用于所有这 20 张图像

var colors = ["cl1","cl2","cl3","cl4"];


        var i = 0;
        $(".my_image").each(function(){
            $(this).addClass(colors[i]);
            if(i == colors.length-1)
            {
                i = 0;
            }
            else
            {
                i++;    
            }
        });
    });

这是行不通的，我使用了一个 var colors，我试图在其中定义四个类，现在我想通过一个循环回显所有这四个类应该应用于 20 个图像，例如

cl0 should be applied to image 1
cl1 should be applied to image 2
cl2 should be applied to image 3
cl3 should be applied to image 4
cl0 should be applied to image 5
cl1 should be applied to image 6

这是行不通的

Answer 1

循环遍历图像并使用图像的索引和模 4，就像这样

var colors = ["cl1","cl2","cl3","cl4"];
$(".my_image").each(function(i, el){
  $(el).addClass(colors[i % 4]);
});

.cl1 {
  color: red;
}
.cl2{
  color: green;
}
.cl3 {
  color: blue;
}
.cl4{
  color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="my_image">1</p>
<p class="my_image">2</p>
<p class="my_image">3</p>
<p class="my_image">4</p>
<p class="my_image">5</p>
<p class="my_image">6</p>
<p class="my_image">7</p>
<p class="my_image">8</p>
<p class="my_image">9</p>
<p class="my_image">10</p>