Добавление классов в несколько элементов

Question

Я новичок в jquery, и я пытаюсь сделать следующее:

У меня есть несколько экземпляров div. для каждого экземпляра я случайно добавляю класс (для изменения некоторых атрибутов). добавленные классы берутся из списка.

это хорошо работает - но теперь я пытаюсь добавить один и тот же (случайный) класс в child-div предыдущего.

мой HTML является:

<div class="random"> 
    <div class="alsorandom"> </div> 
</div> 

<div class="random"> 
    <div class="alsorandom"> </div> 
</div> 

вот мой текущий JQuery (рандомизация происходит так, что 2 классы никогда не добавляются друг за другом):

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green']; 
var prevClass = ""; 
$('.randomcolor').each(function() { 
    var classes2 = []; 
    for (var i = 0; i < classes.length; i++) { 
     if (classes[i] !== prevClass) { 
      classes2.push(classes[i]); 
     } 
    } 
    $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]); 
}); 

следующие я попытался, и это не работает:

$('.randomcolor, .alsorandom').each(function() { ... 

Я был бы рад за любую помощь. Спасибо.

Answer 1

Если вы знаете, что дополнительный элемент является прямым потомком первого элемента, вы можете использовать метод .children(), чтобы получить его. Как это:

prevClass = classes2[Math.floor(Math.random()*classes2.length)]; 
$(this).addClass(prevClass).children('.alsorandom').addClass(prevClass); 

Весь код будет выглядеть следующим образом:

var classes = ['blue', 'yellow', 'lightorange', 'violet', 'green']; 
var prevClass = ""; 
$('.randomcolor').each(function() { 
    var classes2 = []; 
    for (var i = 0; i < classes.length; i++) { 
     if (classes[i] !== prevClass) { 
      classes2.push(classes[i]); 
     } 
    } 
    prevClass = classes2[Math.floor(Math.random()*classes2.length)]; 
    $(this).addClass(prevClass).children('.alsorandom').addClass(prevClass); 
}); 

Если дополнительный элемент является потомком, но не обязательно является прямым потомком, а затем использовать метод .find() вместо метода .children() ,

Answer 2

Видя ваш HTML, вместо этого:

$('.randomcolor, .alsorandom') 

сделать это:

$('.random, .alsorandom') 

Демо здесь: http://jsfiddle.net/edgarinvillegas/vYL55/2/

Приветствия

Answer 3

Вы можете сделать это с помощью JQuery .each():

var classes = ["blue", "red", "green"]; 

$(".random").each(function(){ 
    var $this = $(this); 
    var classIndex = Math.floor(Math.random()*(classes.length)); 
    alert(classIndex); 
    $this.addClass(classes[classIndex]); 
}); 

Посмотрите на этой fiddle с рабочим примером