Question

So I’m trying to go over each image in a gallery and overlay it with another returned from php. I collect all the , and then iterate over them, creating a “holding frame”, and then adding the dynamic image to that.

Somehow they are all adding to the final image I process. Each image gets a frame, but the new images are all overlayed on the final image in the gallery.

What am I doing wrong. I’ve used that=this to take care of scope in the AJAX callback,

var $allPics = $(".pixelsandwich");
$allPics.each(function(){

    $(this).wrap('<div class="pixelsandwichFrame" />');
    src = $(this).attr('src');
    $that = $(this); 
    $.ajax({
        type:"POST",
        url:"js/pixelsandwich/pixelsandwich.php",
        data:{src:src},
        success:function(response){
            newImg = $("<img class='crunched'>");
            newImg.attr('src', response);
            frame = $that.parent();
            frame.append(newImg); // << these are all appending to the frame of the last image instead of each one
        }
    });
});

Answer 1

Your $that is a global variable (because its missing var), so it is being overridden in every step of the loop. Declare it locally:

$(".pixelsandwich").each(function () {

    var $that = $(this).wrap('<div class="pixelsandwichFrame" />');

    $.ajax({
        type: "POST",
        url: "js/pixelsandwich/pixelsandwich.php",
        data: { src: $that.attr('src') },
        success: function (response) {
            var newImg = $("<img class='crunched'>").attr('src', response);
            $that.parent().append(newImg);
        }
    });
});