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

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

1 голос
/ 28 марта 2012

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

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

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

Ответы [ 3 ]

9 голосов
/ 28 марта 2012

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

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

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

1 голос
/ 28 марта 2012

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

0 голосов
/ 28 марта 2012

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

$('.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>' ) );
});

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

...