JQuery: Iterate through an array by using on('click')

Question

I am trying to get into JQuery but am struggling a bit around.

What I'm trying to do is go through an array one click at a time so that each time I click on the "next" button a new item is presented.

Let's take a look at the following code:

$(document).ready(function(){
    var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<stuff.length;i++)
    {
        console.log(stuff[i]);
    }  
});

Now how I was thinking something like creating a while loop with i

$("#next").on('click', function(){i++;});

But this somehow doesn't work. Anyone able to explain to me how to do this in a relatively simple way?

A loop does not respond to user interaction. It always runs completely. — Felix Kling, May 14 '13 at 17:25

Derek Henderson · Accepted Answer · 2013-05-14T18:07:57.167

When you run through your loop with the for statement, it does so immediately and not in response to an event.

Instead, you want to step through the array with each click. To do so, you need to define a counter outside your click function and increment (or reset, if you've reached the end of the array) with each click.

Here is some sample code:

$(function () { // this is a shortcut for document ready
    var stuff = ['house', 'garden', 'sea', 'cat'],
        counter = 0;

    console.log(stuff[counter]); // your initial value

    // the next line, of course, assumes you have an element with id="next"
    $('#next').click(function () {
        counter = (counter + 1) % stuff.length; // increment your counter
        // the modulus (%) operator resets the counter to 0
        // when it reaches the length of the array

        console.log(stuff[counter]); // the new incremented value
    });
});

I hope this helps!

score 5 · Answer 2 · answered May 14 '13 at 17:24

5

Simply keep a counter outside your callback and increment it at each click :

$(document).ready(function(){
    var i = 0;    
    var stuff =["house","garden","sea","cat"]; 
    $("#next").on('click' function(){
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });
});

answered May 14 '13 at 17:24

Denys Séguret

372,613
87
782
758

Short followup: What is the intention behind adding the "%stuff.length;"? – Paul May 14 '13 at 17:43
2

@Peter: `%` is the modules operator. `i` will be reset to `0` if it is equal to `stuff.length` ( `4 % 4 = 0`). This is often use to "wrap around" when iterating over an array, otherwise you would continue increasing `i` and no such elements exist in the array. – Felix Kling May 14 '13 at 17:44

thatidiotguy · Answer 3 · 2013-05-14T17:34:41.777

1

$(document).ready(function(){
   var currentPos = 0;

   $("#next").click(function()
   {
      currentPos++;
      printThings(currentPos);
   });
});

function printThings(maxLength)
{
   maxLength = maxLength > stuff.length ? stuff.length : maxLength;
   var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<maxLength;i++)
    {
        console.log(stuff[i]);
    }  
}

edited May 14 '13 at 17:34

answered May 14 '13 at 17:25

thatidiotguy

8,701
13
60
105

score 0 · Answer 4 · answered Sep 16 '14 at 13:12

0

I wanted to cycle in the opposite direction:

$("#prev").on('click', function(){
        stuff.reverse();
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });

It works but it skips one value...

answered Sep 16 '14 at 13:12

Mike

39
6

score -1 · Answer 5 · answered May 14 '13 at 17:27

-1

I would add a text box to the form. Then, on your #next click function loop the array. While looping compare the array value to what is in the text box. When you get a match - change the value of the text box to the next array value in the loop, then exit the loop.

answered May 14 '13 at 17:27

James Bailey

1

2

That sounds complicated and why would you use a textbox if you can just store the value in a variable? The OP does not even mention that they are using a form. – Felix Kling May 14 '13 at 17:38

JQuery: Iterate through an array by using on('click')

5 Answers5

Linked