Question

Let’s say I have 4 x img tags with the same class and each has different url. I can retrieve each url with this code:

$('.userPicture img').each(function(){
    var getImageLink = $(this).attr('src');
    console.log(getImageLink)
});

Console.log:

http://link1.com
http://link2.com
http://link3.com
http://link4.com

The quesion is how to append each link only once per class?

$.each(getImageLink, function(i) {
    $('.aboutInfo').eq(i).append('<p><a href="'+getImageLink+'"></a></p>');

});

Best result I can get is:

.aboutInfo
http://link1.com
http://link2.com
http://link3.com
http://link4.com

.aboutInfo
http://link1.com
http://link2.com
http://link3.com
http://link4.com

what I need is:

.aboutInfo
http://link1.com

.aboutInfo
http://link2.com

etc…

I can’t figure it out by myselft 🙁

Answer 1

this should work

$('.userPicture img').each(function(i, el){
  var getImageLink = $(el).attr('src');
  $('.aboutInfo').eq(i).append('<p><a href="'+getImageLink+'"></a></p>');
});

The key is to do the appending inside the .each loop…that way getImageLink will be the proper value (it’s in scope) and it will append to each link once.

UPDATE: To answer the question posed in the comments, you don’t need to have text in a link to have it work. The CSS could simply be this:

.aboutInfo {
  background: url(http://server.com/images/20x100-image.png) center left no-repeat;
  height: 20px;
  width: 100px;
  display: block;
}

Either way, the question of why the link has no text is not really the point of the OP’s question, but hopefully this explanation will help anyone who’s curious.