按顺序将css类添加到div元素

时间:2015-06-26 15:40:40

标签: javascript jquery html css

我有一个来自数据库的动态内容div。这个div是重复区域,显示来自数据库的大约15条记录。这个div有一个类" cslide"已经分配。

现在,我有7个css类,即colour1,colour2,colour3 ... colour7。我想按顺序将这些类逐个应​​用到重复的div中:第一个div将有colour1,第二个div将有colour2,依此类推。

可以使用jQuery或Javascript完成吗?

2 个答案:

答案 0 :(得分:2)

假设你正在重复这些课程,那么是的,就像这样

在jQuery中做
    $('.cslide').each(function(index, element)
    {
        var i = (index % 7) + 1; // 7 is the number of classes
        $(this).addClass('colour'+i);
    });

如果这不能直接在<script>...</script>块中工作,请将其包围在

$(document).ready(function() { ... });

这里可以看到使用5个类和15个对象的示例

https://jsfiddle.net/c5v6z8yt/

答案 1 :(得分:0)

&#13;
&#13;
$(document).ready(function(){
    color = 0;
    for(i=0;i<=15;i++){
         if(color < 7){
    color++;
    }else{
    color = 1;
    }
    $('.cslide:eq('+i+')').addClass('color'+color);
    }

});
&#13;
.color1{
    color:red
}
.color2{
    color:green
}
.color3{
    color:blue
}
.color4{
    color:yellow
}
.color5{
    color:orange
}
.color6{
    color:aqua
}
.color7{
    color:violet
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cslide"> Text1 </div>
<div class="cslide"> Text2 </div>
<div class="cslide"> Text3 </div>
<div class="cslide"> Text4 </div>
<div class="cslide"> Text5 </div>
<div class="cslide"> Text6 </div>
<div class="cslide"> Text7 </div>
<div class="cslide"> Text1 </div>
<div class="cslide"> Text2 </div>
<div class="cslide"> Text3 </div>
<div class="cslide"> Text4 </div>
<div class="cslide"> Text5 </div>
<div class="cslide"> Text6 </div>
<div class="cslide"> Text7 </div>
<div class="cslide"> Text8 </div>
&#13;
&#13;
&#13;