Question

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

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

可以使用jQuery或Javascript完成吗？

Answer 1

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

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

Answer 2

＆＃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;

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

2 个答案: