裹链接到的所有图像一个div内使用jQuery

问题描述：

<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>');

但它甚至不工作。我在做什么错？

谢谢。

'$ wrapAll（ '');' ? Or '$('.photo').wrapAll('（”照片'）。 “）;'？ http://api.jquery.com/wrapAll/ – PeeHaa 2012-03-28 15:43:19

它不起作用。图像与jquery加载与：d_row.append（img）; – Alvaro 2012-03-28 16:53:05

答

因为hrefs将全部不同，所以您需要使用each。

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

注意wrapAll是不是你想要的呢，因为它需要的所有元素，并用一个锚标记包装他们。如果您没有使用每个元素都需要不同href的锚，则wrap可以独立工作并分别包装每个元素。

听起来很不错，但它似乎不适合我的代码。这可能是因为图像未加载到网站上，它们是通过javascript逐一添加的：d_row.append（img）; 有什么帮助吗？谢谢。 – Alvaro 2012-03-28 16:52:27

如果要动态添加它，可以在追加它之前将它包装起来，或者在将它添加到DOM之前简单地构建要追加的HTML以包含链接。 – tvanfosson 2012-03-28 17:08:01

我已经用这段代码和其余的答复尝试过了，没有人对图像做任何事情。它没有添加任何东西。 – Alvaro 2012-03-28 17:13:23

答

$('img').wrap("<a href='foo'>")将工作得很好。

答

试试这个：

$('.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>')); 
});

我希望这对你的作品...

我的图像在d_row.append（img）之后用JavaScript加载; 所以这不起作用。 – Alvaro 2012-03-28 16:53:26

裹链接到的所有图像一个div内使用jQuery

相关推荐