Question

I have something like this:

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

And I need to get this:

<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>

I need to add the link, the href with the same code as the SRC of each image, and a class.

I was trying to do it like this:

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

But it doesn’t even work.
What am I doing wrong?

Answer 1

Because the hrefs will all be different, you’ll need to use each.

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

Note that wrapAll isn’t what you want anyway as it will take all the elements and wrap them with a single anchor tag. If you weren’t using an anchor that needs a different href for each element, wrap would work by itself and wrap each one individually.