For loop using jQuery/Javascript

Question

I've created a for loop with javascript/jquery, in order to assign a random number to each div class with the name ".choice". There are four div's in total. When I run the following code:

   for (var i = 0; i < 4; i++) {

    var random = Math.floor(Math.random() * 12);
    var chess = $(".choice");
       chess.attr({
        "data-random": random
       });
       $(".choice").append(chess);
   }

All divs return the same number, instead of each div .choice having a random number.

(P.S first question on the site, hope this question made sense. Thanks in advance.)

So you want to loop elements inside .choice? Or do you want to loop multiple .choice elements within? — Jaakko Uusitalo
– Jaakko Uusitalo, Commented Mar 7, 2018 at 5:02

Robby Cornelissen · Accepted Answer · 2018-03-07 05:03:54Z

1

On every iteration of the loop, you're assigning the same random number to every element in your selection.

This should do it:

$(".choice").attr({
  "data-random": () => Math.floor(Math.random() * 12)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice">1</div>
<div class="choice">2</div>
<div class="choice">3</div>
<div class="choice">4</div>

answered Mar 7, 2018 at 5:03

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

Comments

Ryan Gibbs · Accepted Answer · 2018-03-07 05:01:57Z

1

This happens because you're assigning the random number to the class, which assigns the number to every object with that class. If you were to console.log your random number, you would see each of your divs ends up with the last random number generated.

Instead, try iterating over your objects with the class by using:

$('.choice').each(function() {
    //Logic here.
});

answered Mar 7, 2018 at 5:01

Ryan Gibbs

1,3201 gold badge15 silver badges29 bronze badges

Comments

dork · Accepted Answer · 2018-03-07 05:00:31Z

0

You're targeting all div.choices with var chess = $(".choice");. You should move that line outside the for loop and target only the nth div for setting the attribute.

answered Mar 7, 2018 at 5:00

dork

4,6083 gold badges34 silver badges60 bronze badges

Comments

Ravi Tiwari · Accepted Answer · 2018-03-07 05:19:27Z

When you are selecting the element using $(".choice"); this will return you the array of all elements having .choice class. And when you are adding the attribute it will add the same attribute with same value everytime.

It is taking the last random value which was generated in the last ie. 4th iteration.

var chess = $(".choice");
for (var i = 0; i < 4; i++) {
    var random = Math.floor(Math.random() * 12);
    chess[i].attr({ "data-random": random });
}

I ran this loop till 4th element as asked in the question.

If you want to run this for all elements having same class name as .choice you should run it as below :-

var chess = $(".choice");
for (var i = 0; i < chess.length; i++) {
    var random = Math.floor(Math.random() * 12);
    chess[i].attr({ "data-random": random });
}

This will add the random number for each element having classname choice for attribute data-random.

Collectives™ on Stack Overflow

For loop using jQuery/Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related