Add random css classes to random elements with javascript/jquery

Question

I have 75 divs with multiple products, I need to display random badges to random products.

This is html where badge is displayed :

<div class="badge"> </div>

This is my script which is adding random classes to all elements with class badge, I want to add random classes to random products .

var classes = ['lastBadge', 'offerBadge', 'stockBadge'];
var prevClass = "";
$('.badge').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)]);
console.log(prevClass);
});

JNF · Accepted Answer · 2015-11-16 08:48:23Z

1

Add a condition when applying the class

var percentage = 50;
if(Math.random() > percentage/100)
   $(this).addClass(prevClass =classes2[Math.floor(Math.random()*classes2.length)]);

Change percentage to decide how many products get a badge (statistically...)

answered Nov 16, 2015 at 8:48

JNF

3,7403 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yeldar Kurmangaliyev · Accepted Answer · 2015-11-16 09:01:05Z

1

You can randomly take your classes one by one, and in every iteration apply and remove the used one:

var classes = ['A', 'B', 'C', 'D', 'E'];

$(".badge").each(function() {
  if (classes.length === 0) return false; // break jQuery each

  var index = Math.floor(Math.random() * classes.length);
  var className = classes[index];
  
  console.log(className);
  $(this).addClass(className);
  classes.splice(index, 1);
});

.badge.A {
  background-color: #777;
}

.badge.B {
  background-color: #888;
}

.badge.C {
  background-color: #999;
}

.badge.D {
  background-color: #AAA;
}

.badge.E {
  background-color: #BBB;
}

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

<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">4</div>
<div class="badge">5</div>
<div class="badge">6</div>
<div class="badge">7</div>
<div class="badge">8</div>

You may want to clone your array using Array.from or [].slice.call in order to not loose your classes list after applying.

edited Nov 16, 2015 at 9:01

answered Nov 16, 2015 at 8:44

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

5 Comments

Narxx Over a year ago

Move the script to after the divs are loaded, or use 'ready' state because the divs aren't loaded when the function is running, and nothing works on the preview on SO :)

Yeldar Kurmangaliyev Over a year ago

@Narxx It works for me...Stackoverflow always places scripts in snippets after HTML.

Narxx Over a year ago

you are correct. I have blocked jQuery without noticing. Get a +1 for your solution.

user3478639 Over a year ago

Thank you for your answer, but if i have 10 divs only first 5 divs will have a random class added. And how can only some divs will have a random css and some not. Like from 30 divs ..only 15 divs to have a random css from css array.jsfiddle.net/wdau9ust

Narxx Over a year ago

Just give a class to those divs you want to have a random class. In this example, the class is badge. You can set a different class to loop through.

bulanmaster · Accepted Answer · 2015-11-16 09:06:11Z

You could do the following:

var classes = ['lastBadge', 'offerBadge', 'stockBadge'];

var randomBadges = function() {
  var divCount = 75;
  var randomDivCount = Math.floor(Math.random() * divCount);
  var randomEl, randomClass;

  do {
    randomEl = Math.floor(Math.random() * divCount);
    randomClass = classes[Math.floor(Math.random() * 3)];
    $('.badge').eq(randomEl).addClass(randomClass);
    randomDivCount--;
  } while (randomDivCount >= 0);
}

randomBadges();

.badge {
  background: gray;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.lastBadge {
  background: red;
}
.offerBadge {
  background: green;
}
.stockBadge {
  background: blue;
}

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

<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>
<div class="badge"></div>

Collectives™ on Stack Overflow

Add random css classes to random elements with javascript/jquery

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related