CODEWITHSUNDEEP
jquery
Manbearpig
Manbearpig

Reputation: 1

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"><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!!

Upvotes: 0

Views: 382

Answers (3)

alex
alex

Reputation: 490153

$('.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>

Upvotes: 5

Chandu
Chandu

Reputation: 82893

Try this:

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

Upvotes: 1

user578895
user578895

Reputation: 

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

Upvotes: 2

Related Questions