Question

I am fetching some json and returning it out, creating a new div for each object. I am now trying to add one final div (not from json) that just says something along the lines of ‘This could be yours!’.

I have tried to insert

$('section#fans').append('<div class="fan">new div</div>');

or several variations of that (after, appendChild etc) and cannot get it to perform as i wish. Currently it adds one new div but before the foreach kicks in and it doesn’t follow the fadeIn delay pattern that for the foreach does.

How can i get it to add the div with the same effect after the foreach. as one final div? As if it belonged to the json, altough it wont be the same template as the previous.

function get_fans(){

    $.ajax('http://localhost/facebook_app/selectFans/', {
        type : 'get',
        dataType: 'json',
        success : function (data) {
            $.each(data, function(index) {setTimeout(function(){

                var first_name = data[index].first_name;
                var location = data[index].location;
                var imagePath = data[index].image_path;

                var d = $('<div class="fan"><img src="http://localhost/uploads/' + imagePath + '" width="170" height="160" />' + first_name + ', ' + location +'</div>');
                $('section#fans').append(d);
                d.hide();
                d.fadeIn('50');

                }, 250*(index +1));


            });

            $('section#fans').append('<div class="fan">new div</div>');

        },
    });
}

Answer 1

Your “final” insert is done immediately, while the other ones are done after a timeout.

You could replace

$('section#fans').append('<div class="fan">new div</div>');

with

setTimeout(function(){
    $('#fans').append('<div class="fan">new div</div>');
}, 250*(data.length +2));

so that the final insert would be done after all others have been done.

A side note : don’t use $('section#fans') but $('#fans'). This will be faster as jQuery will use the fast document.getElementById function.