javascript - jQuery $.each() method not behaving as expected -

javascript - jQuery $.each() method not behaving as expected -

i trying experiment morning: loop through number of list items , perform functions on them. 1 time function performed on of items phone call function 1 time again (similar recursive function) , start on again. here code:

function fade(element) { var totalelements = element.length - 1; $.each(element, function(index) { console.log(index); $(this).eq(index).fadein(1000, function(){ $(this).delay(500).fadeout(1000, function(){ if(index < totalelements) { console.log(index); } }); }); }); } var $pictures = $('.fader li'); fade($pictures);

the html simple unordered list can see in illustration - http://jsfiddle.net/jayblanchard/ap6qt/

what occurs first console.log(index) returns each index in order before first fadein() called. first fade cycle called , sec console.log(index) occurs, outputting 0.

what happening here? why doesn't $.each() cycle through each image , perform functions , why console log spit out of indexes immediately?

edit: going experiment other form of each see if same results.

inside each(), this refers current element. in case, it'll single html element.

you're wrapping single html element in jquery object, calling eq(index) on jquery object contains one element.

once past index == 0, nil beingness matched eq(), resulting in empty jquery object, resulting in no actual fadein or fadeout calls beingness made on elements think being. why see fadeout on first element.

simply remove eq(index), , it'll work. won't see console.log(2), because you're excluding if condition.

javascript jquery