Iterating through a jQuery array

Question

I'm trying to iterate through an array and assign values to an element as such:

<tool>hammer</tool>

var tools = ["screwdriver", "wrench", "saw"];
var i;
for (i=0; i < tools.length; ++i){
$("tool").delay(300).fadeOut().delay(100).html(tools[i]).fadeIn();
};

However this doesn't seem to work as only "saw" is assigned as the html value and keeps fading in and out.

What am I doing wrong here?

All the delays and fades fire at the same time overwriting everything with the last value only — adeneo
– adeneo, Commented Aug 1, 2015 at 12:00
@adeneo tool is a custom html element. got it. so if i include them in separate lines it should work? — blue_zinc
– blue_zinc, Commented Aug 1, 2015 at 12:01
@JaredFarrish Thanks! If you include it as an answer, I'll accept it! — blue_zinc
– blue_zinc, Commented Aug 1, 2015 at 12:10

Jared Farrish · Accepted Answer · 2015-08-01 12:20:29Z

2

jQuery.delay() pauses between effects queued items, so your .html() is being set instantaneously. Hence, you only see saw.

A solution is to scrap the for loop and "loop" against the length of the array, setting the tool text to the next first item in the array (as you remove it). However, you need to do this inside the context of the queue, so you can use the .fadeOut() callback to do this.

Wrap all this in a function (here, I immediately invoke it but give it a label, a, so it can be referenced, it's not anonymous) and pass that to .fadeIn() at the end so it continues the loop until the array is empty.

var tools = ["screwdriver", "wrench", "saw"];

(function a(){
    if (tools.length) {
        $("tool").delay(300).fadeOut(0, function(){
            $(this).html(tools.shift());
        }).delay(100).fadeIn(a);
    }
})();

http://jsfiddle.net/tc1q1vv7/1/

edited Aug 1, 2015 at 12:20

answered Aug 1, 2015 at 12:12

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

Iterating through a jQuery array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related