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

Question

我正在使用 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');
            }

        }

    });
});

我想要这样的输出

<div class="main-class">
<div class="myclass red"></div>
<div class="myclass yellow"></div>
<div class="myclass gray"></div>
<div class="myclass red"></div>
<div class="myclass yellow"></div>
<div class="myclass gray"></div>
<div class="myclass red"></div>
<div class="myclass yellow"></div>
</div>

但是我明白了

<div class="main-class">
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    <div class="myclass red yellow gray"></div>
    </div>

我是 jQuery 新手。

Answer 1

您可以使用带有回调的addClass，并检查索引

$('.myclass').addClass(function(i) {
  return i % 3 === 0 ? 'red' : (i % 3 === 1 ? 'yellow' : 'gray');
});

.red {color: red}
.yellow {color: yellow}
.gray {color: gray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
  <div class="myclass">text</div>
</div>