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会有所不同，所以您需要使用each。

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

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

Answer 2

$('img').wrap("<a href='foo'>")可以正常使用。

Answer 3

试试这个：

$('.photo').before('<a href="www.example3.com" class="link">');
$('.photo').after('</a>');

如果你想要

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

我希望这适合你...

如何将链接包装到div中的所有图像？

3 个答案: