CODEWITHSUNDEEP
jqueryhtml
UI Best
UI Best

Reputation: 57

Dynamically add class name to div's through jquery

I'm trying to add class name to multiple div's dynamically through jquery. My requirement is like For example we have 10 divs 

<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>

i want to add class name dynamically for every three divs with counter as shown below.

<div class="sec sec_1"></div>
<div class="sec sec_1"></div>
<div class="sec sec_1"></div>

<div class="sec sec_2"></div>
<div class="sec sec_2"></div>
<div class="sec sec_2"></div>

<div class="sec sec_3"></div>
<div class="sec sec_3"></div>
<div class="sec sec_3"></div>

<div class="sec sec_4"></div>

Please help me in achieving this.

Upvotes: 2

Views: 113

Answers (3)

Anonymous Duck
Anonymous Duck

Reputation: 2978

Just find all the divs with class name 'sec' then assign id to them by looping

var resCtr = 1
var indexCtr = 1
$('.sec').each(function(i, obj) {
      $(this).addClass('sec_' + indexCtr);
      if (resCtr == 3 ) {
         resCtr = 1;
         indexCtr++;
      }
      resCtr++;

});

Here is a working fiddle : Auto assign Class

Upvotes: 0

Rino Raj
Rino Raj

Reputation: 6264

var counter = 0;
$("div").each(function(index) {
  if (index % 3 == 0) {
    counter++;
  }
  $(this).addClass('sec_' + counter);
});

DEMO 

var counter = 0;
$("div").each(function(index) {
  if (index % 3 == 0) {
    counter++;
  }
  $(this).addClass('sec_' + counter);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>

Upvotes: 1

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

Yes, you can use nested loop like this: 

var ar=$("div.sec");
  var suffix=1;
  for(var i=0;i<ar.length;i++){
    for(var j=1;j<=3;j++){
        $(ar[i]).addClass("sec_"+suffix);//.text("sec_"+ suffix);
      i++
    }
    suffix++;
  }

Here is working enter link description here

Upvotes: 0

Related Questions