Fill divs with strings from array

Question

I want to have divs fill with text stored in a jquery array randomly. My html looks like

<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

In my jQuery I have an array that looks like

var fruits = ["Apple", "Pear", "Orange"]

Each cell should be filled with a fruit randomly but I am stuck with iterating over the correctly and picking random values for each div with the class cell. This code obviously does not work:

$.each(fruits), function(fruit) {
    var fruit = fruits[Math.floor(Math.random()*fruits.length)];
    $('.row .cell').text(fruit);
}

How can I make the random guess happen exactly 5 times and fill the divs correctly?

DGS · Accepted Answer · 2015-08-11 05:36:54Z

5

Try this instead

$('.cell').each(function(){
   $(this).text(fruits[Math.floor(Math.random()*fruits.length)])
})

answered Aug 11, 2015 at 5:36

DGS

6,0251 gold badge23 silver badges37 bronze badges

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

1 Comment

Tushar Over a year ago

You can also use index of each()

Tahir Ahmed · Accepted Answer · 2015-08-11 05:42:18Z

3

This should do it:

var fruits = ['Apple', 'Pear', 'Orange'];
$('.cell').each(function(index) {
  $(this).text(fruits[Math.floor(Math.random()*fruits.length)]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

You needed to iterate on .cell elements instead of fruits array. Hope this helps.

answered Aug 11, 2015 at 5:42

Tahir Ahmed

5,7372 gold badges20 silver badges28 bronze badges

1 Comment

Tahir Ahmed Over a year ago

ha! @DGS beat me to it :)

Harshit Gupta · Accepted Answer · 2015-08-11 05:49:36Z

0

Try this solution

function getRandomInt(min, max) {
  return Math.random() * (max - min) + min;
}

This function will generate the values between the min and max length of array so that you will get appropriate value.

$('.cell').each(function(){
   $(this).text(fruits[getRandomInt(0, fruits.length)]);
});

answered Aug 11, 2015 at 5:49

Harshit Gupta

7391 gold badge9 silver badges26 bronze badges

Comments

M Chang · Accepted Answer · 2015-08-11 06:06:38Z

0

$('.row .cell').text(fruit) will change text for every ".cell" Here's a quick correction:

var fruits = ["Apple", "Pear", "Orange"]; 

$.each(fruits, function(i, fruit) {
 var fruit = fruits[Math.floor(Math.random()*fruits.length)];
 $('.cell').eq(i).text(fruit);
});

answered Aug 11, 2015 at 6:06

M Chang

785 bronze badges

Collectives™ on Stack Overflow

Fill divs with strings from array

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related