jQuery将所有图像转换为锚点答案

【问题标题】：jQuery convert all images to anchorjQuery将所有图像转换为锚点
【发布时间】：2014-03-25 10:18:32
【问题描述】：

我想像这样转换所有图像：

<img src='example.com/img1.jpg' />
<img src='example.com/img2.jpg' />
<img src='example.com/img3.jpg' />

到：

<a href='example.com/img1.jpg' rel='shadowbox[Mixed]'><img src='example.com/img1.jpg' /></a>
<a href='example.com/img2.jpg' rel='shadowbox[Mixed]'><img src='example.com/img1.jpg' /></a>
<a href='example.com/img3.jpg' rel='shadowbox[Mixed]'><img src='example.com/img1.jpg' /></a>

使用 jQuery，我试过这个：

$("img").replaceWith( "<a rel='shadowbox[Mixed]' href='"+$(this).attr("src")+"'><img src='" + $(this).attr("src") + "'/></a>" );

但没用:(

【问题讨论】：

什么不起作用？当您检查浏览器检查器时，它是否显示任何变化？

标签： jquery image replace anchor

【解决方案1】：

给你（不过，你可能想使用@Musa 的 .wrap() 解决方案，它更优雅）：

$(document).ready(function() {

    $('img').each(function() {
         var attr = $(this).attr('src');
         var newElement = "<a href='" + attr + "' rel='shadowbox[Mixed]'><img src='" + attr + "' /></a>"

         $(newElement).insertAfter($(this));
         $(this).remove();

    });     

});

演示 jsFiddle： http://jsfiddle.net/9DUGH/1/

有用的读物： .insertAfter()

【讨论】：

【解决方案2】：

试试wrap

$("img").wrap(function(){
    return "<a rel='shadowbox[Mixed]' href='"+$(this).attr("src")+"'></a>";
});

DEMO

【讨论】：

【解决方案3】：

$('img').each(function(k,v) {
    $(this).wrap('<a href="' + $(this).prop('src') + '" rel="shadowbox[Mixed]" />');
});

【讨论】：