CODEWITHSUNDEEP
javascriptjqueryhtml
bansal kapil
bansal kapil

Reputation: 525

How to add three different class in multiple div using jQuery?

I am using jQuery for add three different classes in my div with same name classes. Here is my 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>

here is my jquery code

$(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');
            }

        }

    });
});

i want my output like this

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

but i got this 

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

I am new in jQuery.

Upvotes: 1

Views: 1692

Answers (5)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

UPDATE: the code works fine now, you need to serve colors in array then loop over each .myclass element and set class name according to colors array position witch reset if the .myclass index equal to colors length to repeat. 

$(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]
    });
  });

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

code updated test snippet

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76436

You can use jquery .each() to iterate the elements and % to see the modulo with 3:

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

Your mistake was that

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

adds red as a class to everything having the class of myclass.

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Use each() to iterate through your elements and addClass() as per your need.

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 = ['red', 'yellow', 'grey'];
var i=0;
$('.main-class').children().each(function(key, value){
  if(i == 3) { i=0; } 
  $(value).addClass(classArr[i]);
  i++;
});
.red
{
 color: red; 
}
.yellow
{
 color: yellow; 
}
.grey
{
 color: grey; 
}
<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>

Upvotes: 1

adeneo
adeneo

Reputation: 318182

You could use addClass with a callback, and check the index

$('.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>

Upvotes: 3

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

Try this!

By this way, you can add n number of class names to the array and the code will work.

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
})
.myclass{
  height: 20px
}
.red {
  background: red
}

.yellow{
  background: yellow
}

.gray{
  background: gray;
}
<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>

Upvotes: 1

Related Questions