JQuery конвертировать все изображения на якорь

Question

JQuery конвертировать все изображения на якорь

0

Я хочу преобразовать все изображения следующим образом:

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

но не работал :(

زهير طه 24 фев. 2014, в 01:07

Источник

0

Что не работает? Когда вы проверяете инспектор браузера, он показывает какие-либо изменения?
Patrick Hofman 23 фев. 2014, в 23:28

Теги:

jquery

image

replace

anchor

3 ответа

0

Здесь вы идете (однако вы, вероятно, захотите использовать решение @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()

martynas 23 фев. 2014, в 22:04

0

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

Tomanow 23 фев. 2014, в 20:28

Ещё вопросы

Что не работает? Когда вы проверяете инспектор браузера, он показывает какие-либо изменения?

Musa · Accepted Answer · 2014-02-23T21-54-00.000Z

Попробуйте wrap

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

DEMO