使用jquery包含div内所有图像的链接

Question

我有这样的事情:

<img class="photo" src="www.example.com" />
<img class="photo" src="www.example2.com" />
<img class="photo" src="www.example3.com" />

我需要得到这个:

<a href="www.example.com" class="link">
    <img class="photo" src="www.example.com" />
</a>
<a href="www.example2.com" class="link">
    <img class="photo" src="www.example.com2" />
</a>
<a href="www.example3.com" class="link">
    <img class="photo" src="www.example.com3" />
</a>

我需要添加链接,href使用与每个图像的SRC相同的代码,以及一个类.

我试图像这样做:

$('.photo').wrapAll('<a>');

但它甚至不起作用.我究竟做错了什么？

谢谢.

Answer 1

因为hrefs会有所不同,所以你需要使用每个.

$('img.photo').each( function() {
    var $img = $(this),
        href = $img.attr('src');
    $img.wrap('<a href="' + href + '" class="link"></a>');
});

请注意,wrapAll不是你想要的,因为它将采用所有元素并用单个锚标记包装它们.如果您没有使用每个元素需要不同href的锚点,则换行将自行工作并单独包装每个元素.