How to loop an array on jquery

Question

I've been trying to make a script to change the text of a span.

Admittedly I'm not fantastic with jQuery and have found a script. I've edited i but i cannot get the script to loop and i don't know where to even start. Any code hints or links to relevant documentation would be greatly appreciated.

Here's the jQuery so far:

function change() {
        $('#msg').html(options.pop()).fadeIn(750).delay(2000).fadeOut(750, change);
};

var options = [
    "Red Bull",
    "Smoke",
    "Babes",
    "css",
    "batman"
].reverse(); 
change();

And on jsfiddle: http://jsfiddle.net/5s8y3/214/

Your fiddle is appear to be working. What exactly do you need? — Basit
– Basit, Commented Apr 8, 2014 at 13:17

Ghost · Accepted Answer · 2023-06-27 20:57:24Z

6

Stop popping off the array and use an iterator instead.

var messages = ["Red Bull", "Smoke", "Babes", "css", "batman"],
    i = 0;

(function change() {
    var msg = messages[i > messages.length - 1 ? (i = 0) : i++];
    $("#msg").html(msg).fadeIn(750).delay(2000).fadeOut(750, change);
})();

JSFiddle

edited Jun 27, 2023 at 20:57

Ghost

5,2047 gold badges24 silver badges50 bronze badges

answered Apr 8, 2014 at 13:21

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

4 Comments

user1477388 Over a year ago

I don't think I've ever seen that syntax. Nice (I think).

adeneo Over a year ago

It's just a named IIFE and a ternary, no magic, but it might seem a little "strange" at first ?

user1477388 Over a year ago

True. Here's an option if you want to randomize it jsfiddle.net/5s8y3/221

user1477388 Over a year ago

I guess it seems strange because it's not obvious that i=0 : i++ are returning i, not just setting it.

Ghost · Accepted Answer · 2023-06-27 20:55:43Z

3

Just put a global variable:

var i = 0;

Now, add this to your change() function:

if (i < messages.length) {
    i++;
} else {
    i = 0;
}

This portion of code, will loop over your array and go back to the beginning when it has reached the end.

Then, change messages.pop() to messages[i].

Here is a JSFiddle.

edited Jun 27, 2023 at 20:55

Ghost

5,2047 gold badges24 silver badges50 bronze badges

answered Apr 8, 2014 at 13:17

Sebj

4964 silver badges16 bronze badges

Comments

Anthony Grist · Accepted Answer · 2014-04-08 13:31:07Z

2

The issue is that Array.pop removes the element from the array, so once it's gone through your list of messages once there's no more entries and it starts throwing errors. To get it to loop continuously, add the newly removed message to the front of the array:

function change() {
    var message = messages.pop();
    messages.unshift(messages);
    $('#msg').html(message).fadeIn(750).delay(2000).fadeOut(750, change);
};

edited Apr 8, 2014 at 13:31

answered Apr 8, 2014 at 13:22

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

vivek_nk · Accepted Answer · 2014-04-08 13:27:59Z

1

pop() will remove the value from array. So, it works for one full cycle. After that array is empty. So, it displays blank value. actually it works in loop.

var messages = [
    "Red Bull",
    "Smoke",
    "Babes",
    "css",
    "batman"
].reverse();

var i = messages.length;
function change() {
        i=(i%messages.length);
        $('#msg').html(messages[i++]).fadeIn(750).delay(2000).fadeOut(750, change);

};

edited Apr 8, 2014 at 13:27

answered Apr 8, 2014 at 13:21

vivek_nk

1,60016 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to loop an array on jquery

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related