Javascript 如何使用jQuery在多个div中添加三个不同的类？

我正在使用jQuery在我的div中添加三个同名类的不同类。这是我的HTML：

<div class="main-class">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
</div>

这是我的jquery代码

$(document).ready(function() {
    var name=$(".myclass").length ;         
    var selector = '.main-class';

    $(selector).ready(function(){
     for(var s=1;s<=name;s++)
       {   
         if(s>3)
            {   
                for(var z=1;z<=3;z++)
                {
                    alert(z);
                }
                s=s+2;

            }
            else
            {   
              if(s==1)
                $('.myclass').addClass('red');
              if(s==2)
                $('.myclass').addClass('yellow');
              if(s==3)
                $('.myclass').addClass('gray');
            }

        }

    });
});

$（文档）.ready（函数（）{
变量名称=$（“.myclass”）.length；
变量选择器='.main类'；
$（选择器）.ready（函数（）{
对于（var s=1；s3）
{   
对于（var z=1；z试试这个

通过这种方式，您可以将n个类名添加到数组中，代码将正常工作


var c=[“红色”、“黄色”、“灰色”]
变量计数器=0
$（'.myclass'）。每个（函数（i，el）{
$（this）.addClass（c[计数器]）
如果（计数器<（c.长度-1））
柜台++
其他的
计数器=0
})
.myclass{
高度：20px
}
瑞德先生{
背景：红色
}
黄先生{
背景：黄色
}
格雷先生{
背景：灰色；
}

试试这个

通过这种方式，您可以将n个类名添加到数组中，代码将正常工作


var c=[“红色”、“黄色”、“灰色”]
变量计数器=0
$（'.myclass'）。每个（函数（i，el）{
$（this）.addClass（c[计数器]）
如果（计数器<（c.长度-1））
柜台++
其他的
计数器=0
})
.myclass{
高度：20px
}
瑞德先生{
背景：红色
}
黄先生{
背景：黄色
}
格雷先生{
背景：灰色；
}

使用
each（）
迭代元素，并根据需要使用
addClass（）

var classArr = ['red', 'yellow', 'grey'];
var i=0;
$('.main-class').children().each(function(key, value){
  if(i == 3) { i=0; } 
  $(value).addClass(classArr[i]);
  i++;
});


var classArr=[“红色”、“黄色”、“灰色”]；
var i=0；
$（'.main class'）.children（）.each（函数（键、值）{
如果（i==3）{i=0；}
$（value）.addClass（classArr[i]）；
i++；
})；
.red
{
颜色：红色；
}
黄的
{
颜色：黄色；
}
灰色
{
颜色：灰色；
}

红色
黄的
灰色
红色
黄的
灰色
红色
黄的
使用
each（）
迭代元素，并根据需要使用
addClass（）

var classArr = ['red', 'yellow', 'grey'];
var i=0;
$('.main-class').children().each(function(key, value){
  if(i == 3) { i=0; } 
  $(value).addClass(classArr[i]);
  i++;
});


var classArr=[“红色”、“黄色”、“灰色”]；
var i=0；
$（'.main class'）.children（）.each（函数（键、值）{
如果（i==3）{i=0；}
$（value）.addClass（classArr[i]）；
i++；
})；
.red
{
颜色：红色；
}
黄的
{
颜色：黄色；
}
灰色
{
颜色：灰色；
}

红色
黄的
灰色
红色
黄的
灰色
红色
黄的
您可以将
addClass
与回调一起使用，并检查索引


$（'.myclass'）.addClass（函数（i）{
返回i%3==0？'red'：（i%3==1？'yellow'：'gray'）；
})；
.red{color:red}
.黄色{颜色：黄色}
.gray{color:gray}

文本
文本
文本
文本
文本
文本
文本
文本
您可以将
addClass
与回调一起使用，并检查索引


$（'.myclass'）.addClass（函数（i）{
返回i%3==0？'red'：（i%3==1？'yellow'：'gray'）；
})；
.red{color:red}
.黄色{颜色：黄色}
.gray{color:gray}

文本
文本
文本
文本
文本
文本
文本
文本
更新：代码现在运行正常，您需要在数组中提供颜色，然后在每个
.myclass
元素上循环，并根据颜色数组设置类名
如果
.myclass
索引等于要重复的颜色长度，则位置开关复位。
$（文档）.ready（函数（）{
变量颜色=[“绿色”、“红色”、“蓝色”]；
var c=-1；
$（'.main class.myclass'）。每个（函数（）{
C++；
如果（c==colors.length）c=0；
$（this.addClass（colors[c]）；
//使用.css（）进行测试；
$（this.css）({
“颜色”：颜色[c]
});
});
})；

颜色
颜色
颜色
颜色
颜色
颜色
颜色
颜色
更新：代码现在运行正常，您需要在数组中提供颜色，然后在每个
.myclass
元素上循环，并根据颜色数组设置类名
如果
.myclass
索引等于要重复的颜色长度，则位置开关复位。
$（文档）.ready（函数（）{
变量颜色=[“绿色”、“红色”、“蓝色”]；
var c=-1；
$（'.main class.myclass'）。每个（函数（）{
C++；
如果（c==colors.length）c=0；
$（this.addClass（colors[c]）；
//使用.css（）进行测试；
$（this.css）({
“颜色”：颜色[c]
});
});
})；

颜色
颜色
颜色
颜色
颜色
颜色
颜色
颜色
您可以使用jquery迭代元素，并使用
%
查看3的模：

$('.myclass').each(function(index) {
    if (index % 3 === 0) {
        $(this).addClass("red");
    } else if (index % 3 === 1) {
        $(this).addClass("yellow");
    } else {
        $(this).addClass("green");
    }
});

你的错误是

$('.myclass').addClass('red');

将
red
作为
类添加到具有
myclass
的
类的所有内容中
您可以使用jquery迭代元素，并
%
查看具有3的模：

$('.myclass').each(function(index) {
    if (index % 3 === 0) {
        $(this).addClass("red");
    } else if (index % 3 === 1) {
        $(this).addClass("yellow");
    } else {
        $(this).addClass("green");
    }
});

你的错误是

$('.myclass').addClass('red');

将
red
添加为
类
到所有具有
类
的
类
为什么不使用Php？为什么不使用Php？可能你得到了一个否决票，因为这不是OP期望的结果。可能你得到了一个否决票，因为OP期望的结果不是这样