Dynamically filling an anchor href using an img src with jquery

Question

Basically I'm trying to grab the SRC of an image, wrap it in an anchor which then uses the SRC of the img as it's HREF, I've so far got the following code, but I'm a bit stuck as to how to finish it off, any ideas?

$('#detail img').wrap(function() {
return '<a href="" rel="one" class="fancybox" />';
  });

$('#detail img a').attr('src',$('#detail img').attr('src'));

Answer 1

$('#detail img').wrap(function() {
    return '<a href="' + this.src + '" rel="one" class="fancybox" />';
});

By the way, if you can modify initial HTML it's better then doing this with JS.

Answer 2

$('#detail img').wrap(function() {
    return '<a href="' + $(this).attr('src') + '" rel="one" class="fancybox" />';
});

Your second line would always use only the first img a found. Also, img a is not a valid selector anyway since a cannot be a child of img .

Answer 3

Inside the .wrap() function, this refers to the current element (the specific <img> ), so you could do this:

$('#detail img').wrap(function() {
    return '<a href="' + this.src + '" rel="one" class="fancybox" />';
});