javascript - 如何将指向所有图像的链接包装在一个 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>

我需要添加链接，与每个图像的SRC具有相同代码的href，以及一个类。

我试着这样做:

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

但它甚至不起作用。我做错了什么？

Answer 1

因为 href 都不同，所以您需要使用 each .

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

请注意 wrapAll无论如何都不是您想要的，因为它将获取所有元素并用单个 anchor 标记包装它们。如果您没有使用每个元素需要不同 href 的 anchor ，wrap会自行工作并单独包装每一个。