Я хочу преобразовать все изображения следующим образом:
<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>" );
но не работал :(
Здесь вы идете (однако вы, вероятно, захотите использовать решение @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()
$('img').each(function(k,v) {
$(this).wrap('<a href="' + $(this).prop('src') + '" rel="shadowbox[Mixed]" />');
});