jquery each fill elements gradually from array

Question

Hello I would like to fill gradually span elements with values of array. Can you help me please?

<span class="gt"></span>
<span class="gt"></span>
<span class="gt"></span>

var array=["apple","banana","cucumber"];

$("span.gt").each(function(){
    $(this).text(array[?]);
});

Output should look like this:

<span class="gt">apple</span>
<span class="gt">banana</span>
<span class="gt">cucumber</span>

Ankit Agarwal · Accepted Answer · 2018-03-15 08:38:42Z

3

You get the index value in the function for each loop. And since the number of span elements is equal to the number of items in the array variable you can use that index value to set the array values in the span elements:

var array=["apple","banana","cucumber"];

$("span.gt").each(function(index){
    $(this).text(array[index]);
});

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

answered Mar 15, 2018 at 8:38

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

guradio · Accepted Answer · 2018-03-15 08:41:40Z

0

You can use for loop.
Use the increment number as index of the span and index of array

var array = ["apple", "banana", "cucumber"];
for (var i = 0; i < array.length; i++) {
  $('span').eq(i).text(array[i]);
}

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

answered Mar 15, 2018 at 8:41

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

jquery each fill elements gradually from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related