adding classes to multiple elements

Question

i'm a novice to jquery and i'm trying to do the following:

i've got multiple instances of a div. to each instance i randomly add a class (for changing some attributes). the added classes are taken from a list.

this works well — but now i'm trying to additionally add the same (random) class to a child-div of the previous.

my html is:

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

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

here's my current jquery (the randomization takes place so that 2 classes are never added after one another):

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

the following i have tried and it doesn't work:

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

i'd be gracious for any help. thank you.

The supposed working example does nothing > jsfiddle.net/vYL55 — BenM
– BenM, Commented Jan 12, 2014 at 19:37
where is the .randomcolor element? without that class this will not work. — jackJoe
– jackJoe, Commented Jan 12, 2014 at 19:44

John S · Accepted Answer · 2014-01-12 20:41:44Z

If you know the additional element is a direct descendant of the first element, you can use the .children() method to get it. Like this:

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

The entire code would look like this:

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

If the additional element is a descendant, but not necessarily a direct descendant, then use the .find() method instead of the .children() method.

Edgar Villegas Alvarado · Accepted Answer · 2014-01-12 19:44:25Z

0

Seeing your html, instead of this:

$('.randomcolor, .alsorandom')

do this:

$('.random, .alsorandom')

Demo here: http://jsfiddle.net/edgarinvillegas/vYL55/2/

Cheers

answered Jan 12, 2014 at 19:44

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

1 Comment

benniy Over a year ago

i put down the wrong class in the example.. sorry, this doesn't work.

Gil Sousa · Accepted Answer · 2014-01-12 19:54:03Z

0

You can do this with jQuery .each() like this:

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

Have a look at this fiddle with a working example

answered Jan 12, 2014 at 19:54

Gil Sousa

8446 silver badges12 bronze badges

1 Comment

benniy Over a year ago

mh, i dont get this — sorry. i see alerts & my former functionality of 2 random addclasses not appearing after one another doesn't work anymore.

Collectives™ on Stack Overflow

adding classes to multiple elements

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related