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>

Answer 2

试试这个！

通过这种方式，您可以向数组添加n个类名，代码将起作用。

＆＃13;

var c = ['red', 'yellow', 'gray']
var counter = 0
$('.myclass').each(function(i, el){
  $(this).addClass(c[counter])
  if(counter < (c.length -1))
    counter++
   else
    counter = 0
})

＆＃13;

.myclass{
  height: 20px
}
.red {
  background: red
}

.yellow{
  background: yellow
}

.gray{
  background: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

使用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++;
});

＆＃13;

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++;
});

＆＃13;

.red
{
 color: red; 
}
.yellow
{
 color: yellow; 
}
.grey
{
 color: grey; 
}

＆＃13;

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

＆＃13;

Answer 4

更新：代码现在工作正常，您需要在数组中提供颜色然后遍历每个graph = pydotplus.graphviz.graph_from_dot_file("iris.dot")元素并根据颜色数组设置类名如果.myclass索引等于要重复的颜色长度，则重置位置。

.myclass

$(document).ready(function() {
  var colors = ["green", "red", "blue"];
var c = -1;
  $('.main-class .myclass').each(function() {
    c++;
    if(c==colors.length)c=0;
$(this).addClass(colors[c]);
//to test using .css();
    $(this).css({
      "color": colors[c]
    });
  });

});

代码更新的测试代码段

Answer 5

您可以使用jquery .each()迭代元素，$('.myclass').each(function(index) { if (index % 3 === 0) { $(this).addClass("red"); } else if (index % 3 === 1) { $(this).addClass("yellow"); } else { $(this).addClass("green"); } });使用3来查看模数：

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

你的错误是那个

red

将class作为class添加到myclass Button的所有内容中。

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

5 个答案: