looping through the list of thumbnails and linking them to larger images using Flickr API and Jquery

Question

I am trying to simply display some thumbnails from Flickr and link them to the larger images.
The thumbnail portion is working, but I can't "wrap" the thumbnails with a link to the larger image.
I got a piece of code from elsewhere that links thumbnails to their own source and that works.

//var url is set above https://api.flickr.com/services/rest/? bla bla

// loop through the photos
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(json_received){
    $.each(json_received.photoset.photo, function(i,item){
        thumbnail = "https://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_q.jpg";

        large = "https://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_b.jpg";

        $("<img/>").attr("src", thumbnail).appendTo("#images");

        //add links - now the thumbnails are linked to themselves
        $("img").each(function() {
                 $(this).wrap("<a href='" + this.src + "'/>");
                });
    });
});

I tried $(this).wrap("<a href='" + large + "'/>"); but then all the images are linked to the last large image in the list of images.
So I have to attach the "large" value to each image somehow.
This is about a second time I use Jquery, so bear with me :)

Answer 1

Before appending to #images wrap the image with anchor tag and then append it.

You can use .wrapInner() and do something like this instead

var $img = $("<img/>").attr("src", thumbnail);
$("<a href='" + large + "'/>").wrapInner($img).appendTo("#images");