使用 jQuery/Javascript 的 for 循环

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.

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

Answer 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.
});

Answer 2

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>

Answer 3

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

Answer 4

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.