2016-03-08 3 views
2

Я пытаюсь добавить имя класса в динамически динамически через jquery. Мое требование как Например мы имеем 10 дивыДинамически добавлять имя класса в div с помощью jquery

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

я хочу, чтобы добавить имя класса динамически каждые три дивы с прилавка, как показано ниже.

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

Пожалуйста, помогите мне в достижении этой цели.

ответ

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

+0

Большое спасибо. Простой и совершенный ответ. Оно работает. –

0

Просто найти все дивы с именем класса 'сек' затем присвоить идентификатор для них зацикливание

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

}); 

Вот рабочая скрипку: Auto assign Class

+0

Спасибо за быстрый response.I чувствую, что это включает в себя несколько строк кода. –

+0

@ UIBest просто нормально У меня нет времени, чтобы отредактировать мой ответ, но он все еще работает – Sherlock

0

Да, вы можете использовать вложенный цикл, как это:

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

Здесь работает enter link description here

Смежные вопросы