jQuery each callback

Question

How to use callbacks on jQuery each function?

I am trying something like:

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
}, function (){
    $('#Gallery').remove();
    $('body').append('<ul class="gallery">'+new_images+'</ul>');
});

why callback? If you want to perform an action after an .each which is synchronous(!) you just write your code after the .each() — devnull69, Sep 04 '12 at 13:22
Why are you using two functions? The `each` function doesn't support that. Instead, include the 2nd function's statements within the first one. — SexyBeast, Sep 04 '12 at 13:23
`.each` only takes two values (a collection and a function), but you've passed it three (collection(?), function, function). What are you trying to do? — yoozer8, Sep 04 '12 at 13:23
@devnull69 the array is big (about 300 images) and so it can take a while... Is it good to use without callback? — NoNameZ, Sep 04 '12 at 13:25
@NoNameZ Where is the problem with growing a string in 300 steps? There is no DOM method involved ... — devnull69, Sep 04 '12 at 13:27

score 49 · Answer 1 · edited Sep 04 '12 at 13:41

49

$.each(); is a synchronous function. That means you don't need a callback function inside because any code you write after $.each(); will run affter $.each(); ends.

edited Sep 04 '12 at 13:41

yoozer8

7,361
7
58
93

answered Sep 04 '12 at 13:27

Damian SIlvera

866
1
9
19

1

the confusion arises because people (mis)use the term "callback" to refer to any time a function reference is passed, whether that function is subsequently called asynchronously, or not. – Alnitak Sep 04 '12 at 13:33
@Alnitak I intuitively see a callback as some kind of trigger to execute code after a certain block/function/process/animation is finished. If this isn't correct or even just incomplete interpretation, could you refer me to some documentation that might help me grasp the concept better? The comment you made completely through me off, mainly because I'm still trying to learn all this "lingo" – Fernando Silva Jul 25 '14 at 17:17
1

@FernandoSilva well, see for example the MDN documentation for `Array.prototype.map` - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map - They call the supplied function `callback` even though it isn't "something called after". – Alnitak Jul 26 '14 at 10:44
@Alnitak so basically what you're saying is a callback is simply a reference to a function that will be executed within the function that passes that reference? `Array.prototype.map` cycles through an array and given certain conditions executes the passed `callback` function. So what we usually see in jQuery as a `callback` is simply a way to reference a function, that usually gets triggered after the success or complete is achieved, like with an animation and that's how people usually associate the `callback` term to an event type of thing? Is this correct? – Fernando Silva Jul 26 '14 at 12:26
@Alnitak now you got me thinking. If I wanted to implement the callback behaviour, in php I would do something like `function foo($callback){//do something; $callback();}`, how could I achieve the same in javascript, would it be the same? `function jsFoo(callback){//do something; callback();}` ? – Fernando Silva Jul 26 '14 at 12:31
Are you sure? Actually I am still in confusion. – Saiful Islam Sep 21 '17 at 09:25

score 28 · Accepted Answer · answered Sep 04 '12 at 13:24

What's wrong with this code? You don't need a callback for $.each.

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
});

$('#Gallery').remove();
$('body').append('<ul class="gallery">'+new_images+'</ul>');

score 1 · Answer 3 · answered Sep 04 '12 at 13:23

Do you mean this?

$.each(images, function(key, value) { 
    new_images+= '<li><a href="'+value+'"><img src="'+value+'" alt="'+[key]+'" /></a></li>';
});
function myMethod(){
    $('#Gallery').remove();
    $('body').append('<ul class="gallery">'+new_images+'</ul>');
};
myMethod();

score 1 · Answer 4 · answered Dec 28 '12 at 21:41

I have now a solution for an .each-callback!

I had to do an ajax-request for each element in an array. So I made a div-container with all the div-elements for each element. Each time a load was made, the div-element changed to green and .slideUp, after .remove. And each time i asked if the div-container is empty. If yes, I know, all elements are fully loades (because removed).

Here a part of my code:

<script>
$(document).ready( function() {
    $.each(myChannels, function(index, value) {
        $("#tag_"+value).load('getxmls/ajaxrenewchannel/channel:'+value, function() {
            $("#tag_"+value).removeClass('alert-info').addClass('alert-success');
            $("#tag_"+value).slideUp('600', function () {
                $("#tag_"+value).remove();
                if( $('#loadcontainer').is(':empty') ) {
                    window.location = 'feeds/';
                }

                });

        });
    });
});
</script>

Hope this helps somebody out there...

score 0 · Answer 5 · answered Sep 04 '12 at 13:25

Not sure about the callback you meant. I guess this is what you are looking for

$('#Gallery').remove();
var selectItems='<ul class="gallery">';
$.each(images, function(key, value) { 
    selectItems+= '<li><a href="'+value+'">
                              <img src="'+value+'" alt="'+[key]+'" /></a></li>';    
});   
selectItems+= '</ul>';
$('body').append(selectItems);

jQuery each callback

5 Answers5