如何在jQuery中将多个类应用于多个Div - How To apply Multiple Class To Multiple Div In jQuery

How To apply Multiple Class To Multiple Div In jQuery

本文关键字：应用于 Div jQuery | 更新日期: 2023-09-27

所有图像都将使用同一类进行回声处理。这是我的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颜色，其中我试图定义四个类，现在我想通过一个循环进行回声，所有这四个类都应该应用于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

哪个不工作

循环浏览图像并使用图像的索引和模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>