CODEWITHSUNDEEP
jqueryrandomhtml-listsduplicatesaddclass
user990463
user990463

Reputation: 439

Randomly adding classes to a generated <li> only once

I'm appending some <li> in a <div> with jQuery like this :

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    $('#head #lol').append("<li id='losange"+ i++ +"' class='losange'></li>");
};

Which look like this in the html :

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange'></li>
        <li id='losange2' class='losange'></li>
        <li id='losange3' class='losange'></li>
        <li id='losange4' class='losange'></li>
        <li id='losange5' class='losange'></li>
        <li id='losange6' class='losange'></li>
        ...
    </article>
</section>

And now I'm trying to add randomly classes to each <li> in jQuery :

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white');
};

This work well but I need to add more than 1 class but only keep 1 class for each <li>

So I dupplicated the code above (which isn't great) with a different class name :

countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white'); 
};
countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_red'); <- Another class name
};

...

And now my generated <li> look like this :

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange logo_red'></li>  <- Ok!
        <li id='losange2' class='losange logo_red'></li> <- Ok!
        <li id='losange3' class='losange logo white logo red'></li> <- WRONG!
        <li id='losange4' class='losange logo white'></li> <- Ok!
        <li id='losange5' class='losange logo red logo white'></li> <- WRONG!
        <li id='losange6' class='losange logo red'></li> <- Ok!
        ...
    </article>
</section>

PROBLEM :

It adds multiple classes on the same <li> and I only want one class randomly added to my <li> from several classes already defined

Upvotes: 0

Views: 814

Answers (3)

jaudette
jaudette

Reputation: 2313

Place all your classes in an array, then use your random on the array to get your class and add it to your li.

var classes = ['white', 'red', 'logo_white'];
$('#head #head_content li').each(function() {
  var random = Math.floor(Math.random() * classes.length);
  $(this).addClass(classes[random]);
}

Upvotes: 1

E.J. Brennan
E.J. Brennan

Reputation: 46859

You want to do something like this:

 $('#head #head_content li').each(function(n) {
        $(this).addClass(myrandomFunction());
  });

and split out a seperate 'myrandomFunction' that will return random classes, once per call.

Upvotes: 0

Ren&#233; Wolferink
Ren&#233; Wolferink

Reputation: 3548

Loop over the items once, then add a random class for each one:

var colors = ["logo_red", "logo_white"];

for (i = 1; i <= countBlocs; i++)
{
    var liItem = $('#losange' + i);
    var rand = Math.floor(Math.random() * colors.length);
    liItem.addClass(colors[rand]);
};

Upvotes: 1

Related Questions