jQuery - Wrapping a list of image tags with anchor tags

I need to make this:

<div class="image-dump">
<img src="dir/file1.jpg"/>
<img src="dir/file2.jpg"/>
<img src="dir/file3.jpg"/>
<img src="dir/file4.jpg"/>
</div>

Render like so:

<div class="image-dump">
<a href="dir/file1.jpg" rel="group" class="overlay"><img src="dir/file1.jpg"/></a>
<a href="dir/file2.jpg" rel="group" class="overlay">&开发者_StackOverflow中文版lt;img src="dir/file2.jpg"/></a>
<a href="dir/file3.jpg" rel="group" class="overlay"><img src="dir/file3.jpg"/></a>
<a href="dir/file4.jpg" rel="group" class="overlay"><img src="dir/file4.jpg"/></a>
</div>

Note: The href's value needs to be pulled from the img's src value,

Please help!!

$('.image-dump > img').wrapAll(function() {
    return $('<a />', { 'href': this.src, 'rel': 'group', 'class': 'overlay' });   
});

jsFiddle.

Input

<div class="image-dump">
    <img src="dir/file1.jpg"/>
    <img src="dir/file2.jpg"/>
    <img src="dir/file3.jpg"/>
    <img src="dir/file4.jpg"/>
</div>

Output

<div class="image-dump">
<a href="dir/file1.jpg" rel="group" class="overlay"><img src="dir/file1.jpg"></a>
<a href="dir/file2.jpg" rel="group" class="overlay"><img src="dir/file2.jpg"></a>
<a href="dir/file3.jpg" rel="group" class="overlay"><img src="dir/file3.jpg"></a>
<a href="dir/file4.jpg" rel="group" class="overlay"><img src="dir/file4.jpg"></a>
</div>

$('div.image-dump img').each(function(){
    $(this).replaceWith('<a href="' + this.src + '" rel="group" class="overlay"><img src="' + this.src + '" /></a>');
});

Try this:

$(".image-dump img").each(function(){
 var anch = $("a")
 anch.attr("href", $(this).attr("src"));
 anch.attr("rel", "group");
 $(this).wrap(anch);
});