Как обернуть ссылку на все изображения внутри div?

Question

У меня что-то вроде этого:

<img class="photo" src="www.example.com" />
<img class="photo" src="www.example2.com" />
<img class="photo" src="www.example3.com" />

И мне нужно получить это:

<a href="www.example.com" class="link">
    <img class="photo" src="www.example.com" />
</a>
<a href="www.example2.com" class="link">
    <img class="photo" src="www.example.com2" />
</a>
<a href="www.example3.com" class="link">
    <img class="photo" src="www.example.com3" />
</a>

Мне нужно добавить ссылку, href с тем же кодом, что и SRCкаждого изображения и класса.

Я пытался сделать это так:

$('.photo').wrapAll('<a>');

Но это даже не работает.Что я делаю не так?

Answer 1

Поскольку hrefs все будут разными, вам нужно будет использовать каждый .

$('img.photo').each( function() {
    var $img = $(this),
        href = $img.attr('src');
    $img.wrap('<a href="' + href + '" class="link"></a>');
});

Обратите внимание, что wrapAll в любом случае не то, что вам нужно, так как он возьмет все элементы и обернет их одним тегом привязки. Если бы вы не использовали привязку, для которой требуется отдельный href для каждого элемента, wrap сработает сам по себе и обернет каждый из них по отдельности.

Answer 2

$('img').wrap("<a href='foo'>") будет работать просто отлично.

Answer 3

Попробуйте это:

$('.photo').before('<a href="www.example3.com" class="link">');
$('.photo').after('</a>');

И если вы хотите

$( '.photo' ).each( function() {
    var mySrc = $( this ).attr( "src" );
    $( this ).before( '<a href="' + mySrc + '" class="link">' ) );
    $( this ).after( '</a>' ) );
});

Я надеюсь, что это работает для вас ...