jQuery的轉換所有圖像錨

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

在這裏你去（但是，你可能會想使用@穆薩的.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()