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>

注意: 需要从img的src值中提取href的值,

请帮忙!!

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>