Add random class from an array to every specified element, excluding last used class

Question

I have an array with classes and i want to apply random class from this array to specified elements - this is simple. But i need to avoid situation like two or more elements in a row has the same class.

For now i have something like this:

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

What is wrong with simply keeping the last chosen random value in some var and check against that to avoid repetition? — jrook
– jrook, Commented Sep 18, 2017 at 18:30
Do all the entries in your classes array has to be used? Or is it fine as long as it's not repeating itself? — faerin
– faerin, Commented Sep 18, 2017 at 18:31
@entiendoNull There will be at least 20 elements and only five classes so every need to be used. Eventually they could go one by one but I would prefer randomly. — dbx
– dbx, Commented Sep 18, 2017 at 18:38

Karl-André Gagnon · Accepted Answer · 2017-09-18 18:44:04Z

The key is to save the last random value in a variable then remove it from the array. On the following iteration, the class will not be in the array, so it will be impossible to use the same class twice. What's important though is to push the last used class after selecting a new random class.

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"], last_class;

    $(".img-cap").each(function(){
    	var rdm_int = ~~(Math.random()*classes.length);
        var rdm_class = classes.splice( rdm_int, 1 )[0];
        if( last_class ) classes.push( last_class )
        $(this).addClass( rdm_class );
        last_class = rdm_class;
    });
});

.img-cap{
  width : 100px;
  height : 100px
}

.bg1{background:red}
.bg2{background:blue}
.bg3{background:yellow}
.bg4{background:orange}
.bg5{background:purple}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>

Jared Bledsoe · Accepted Answer · 2017-09-18 18:33:45Z

0

May be a bit different than what you want, but this will run until there are no more classes in the list, each time randomly picking one and assigning it. Vanilla JS solution as well.

//Running as many times as there are items in classes
for (i=0; i<classes.length; i++) {
    var randomPick = Math.floor(Math.random()*classes.length)+1];

    //Change this to target whatever you are adding the classes to
    document.getElementsByClassName("img-cap").classList.add(classes[randomPick]);

    //Will edit the class list, removing it so it may not be picked again
    classes.splice(randomPick,1);
}

answered Sep 18, 2017 at 18:33

Jared Bledsoe

5595 silver badges15 bronze badges

Comments

Alexander Dixon · Accepted Answer · 2017-09-18 18:41:38Z

0

You can cache the random number first, and then use the hasClass() method to determine whether or not to apply it.

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var class_to_add = ~~(Math.random()*classes.length);
        console.log(class_to_add);
        if($(this).hasClass(classes[class_to_add]) === false) {
            $(this).addClass(classes[class_to_add]);
        }
    });
});

Full disclosure here, I had no idea what ~~(Math.random()*classes.length would produce prior to this post, so thank you.

edited Sep 18, 2017 at 18:41

answered Sep 18, 2017 at 18:35

Alexander Dixon

8761 gold badge9 silver badges25 bronze badges

1 Comment

insert_name_here Over a year ago

This doesn't answer the question, which asked how to prevent the same class from being added to two elements in a row, not how to prevent the same class from being added to an element twice.

faerin · Accepted Answer · 2017-09-18 18:45:18Z

0

You could do it like this. It would random the classes being used, and once used it would remove that entry from the your classes array.

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var cssClass = classes[~~(Math.random()*classes.length)],
            index = classes.indexOf(cssClass)

        classes.splice(index, 1);

        $(this).addClass(cssClass);

    });
});

edited Sep 18, 2017 at 18:45

answered Sep 18, 2017 at 18:38

faerin

1,92517 silver badges32 bronze badges

Comments

jrook · Accepted Answer · 2017-09-18 18:54:02Z

How about simply:

    $(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
    var temp ='a';
    var x = 'a';
    $(".img-cap").each(function(){
        while(x===temp)
            x = classes[~~(Math.random()*classes.length)]
        temp = x
    //console.log(x)
    $(this).addClass(x);
    });
});

At every iteration in the foreach loop, the while loop constantly chooses a random class until the selected class becomes different than the class selected in the previous iteration thus guaranteeing no two consecutive elements get the same class.

Karl-André Gagnon's asnwer is more thorough to be sure (faster, too). But if you have just a few classes to choose from, the while loop above should not take long before it produces a new value. If there are many classes, then Karl's solution may be the better option.

caramba · Accepted Answer · 2017-09-18 19:10:45Z

Clone the classes array and then use the clone to set the class and remove all classes from the clone until there is nothing left. Then clone again.

var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
var classesClone = classes.slice(0); // clone classes

$('.img-cap').each(function(){
    if(0 == classesClone.length) {
        // lets clone again if classesClone is empty
        classesClone = classes.slice(0);
    }

    var randomNumber = Math.floor(Math.random() * classesClone.length);
    
    $(this).addClass(classesClone[randomNumber]);
    classesClone.splice(randomNumber, 1); // remove item from clone which has just been used
});

.row {
   border:solid 1px black;
   float: left;
}
.img-cap {
  width: 30px;
  height: 30px;
  margin: 10px;
}

.bg1 {
  background-color: orange;
}

.bg2 {
  background-color: green;
}

.bg3 {
  background-color: red;
}

.bg4 {
  background-color: navy;
}

.bg5 {
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
</div>

Collectives™ on Stack Overflow

Add random class from an array to every specified element, excluding last used class

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related