Question

我想转换所有图像：

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

但没有奏效:(

Answer 1

尝试wrap

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

DEMO

Answer 2

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

Answer 3

这里你去（但是，你可能想要使用@ 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();

    });     

});

DEMO jsFiddle： http://jsfiddle.net/9DUGH/1/

有用的阅读材料： .insertAfter()

jQuery将所有图像转换为锚点

3 个答案: