how to add class to 9 divs random in javascript avoid repetition
Hi Guys anyone who can help me please. I want to add class radom to 9 divs without repetition and it must at least skip 3 divs before adding next class.
My current problem it doesn’t skip divs it just adding from index 0 to 8 without skipping any index.
I want to add 9 classes random to divs. Please see my code below.
jQuery(document).ready(function( $ ){ // Your code in here var classes = ["A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9"]; $(".productRow .productWrapper .productItem").each(function(){ var getClass = classes.splice(~~(Math.random()*classes.length), 1)[0]; $(this).addClass(getClass); $(this).append("<div class='logoTag'><img src='/wp-content/uploads/2020/06/"+getClass+".png' class='tagImg'/>"); }); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="productRow"> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> <div class="productWrapper"> <div class="productItem"> <img class="productIgm" src="/img/1515_hero.png"> <h6>Test</h6> <a href="#" class="btn btnBuy">Buy</a> </div> </div> </div>
You are telling it to do each and every item, thus, it’s doing exactly what you told it to do:
$(".productRow .productWrapper .productItem").each(function(){ ^^^^ If you want to have it “skip” products, you need to track how many to skip, and thus which one to use.
It may be better if you do NOT use each, but instead, a for loop. But let’s try to do it with your each loop by using a variable to keep track of your current item.
currentProduct = 0 $(".productRow .productWrapper .productItem").each(function(){ if ((currentProduct % 4) === 0) { // currentProduct modulus 4 = 0, i.e, 0, 4, 8, etc //do whatever you want to do } currentProduct++; } You can adjust the loop to run for different offset, different loop size, etc.
This will loop through each element and check if it’s at least 3 away from the previous element. If so, it’ll flip a coin (i.e. rando(true, false)) to decide if we should add a random class to that element or proceed to the next one.
var elements = $(".normal"); var classes = ["green", "blue", "orange"]; var MIN_SEPARATION = 3; var skipped = MIN_SEPARATION; for(var i = 0; i < elements.length; i++){ if(++skipped > MIN_SEPARATION && rando(true, false)){ skipped = 0; elements.eq(i).addClass(rando(classes).value); } }.normal{ height:15px; margin-top:1px; background:#eee; } div.green{ background:green; } div.blue{ background:blue; } div.orange{ background:orange; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://randojs.com/1.0.0.js"></script> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div> <div class="normal"></div>I used randojs in this code to simplify the randomness and make it easier to read, so if you want to use this code, just remember to paste this in the head of your HTML document:
<script src="https://randojs.com/1.0.0.js"></script> I see that you’re already using jquery, so you should already know to also post this (or wherever you’re sourcing your jquery in from) in the head of your HTML document:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
