jQuery - 使用锚标记包装图像标记列表

Question

我需要这样做：

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

渲染如下：

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

注意： href的值需要从img的src值中拉出，

请帮助!!

Answer 1

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

jsFiddle

输入

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

输出

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

Answer 2

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

Answer 3

试试这个：

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