добавить каждую ссылку только один раз в классе

Question

Допустим, у меня есть 4 тега img с одним и тем же классом, и у каждого разные URL. Я могу получить каждый URL с этим кодом:

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

Вопрос в том, как добавить каждую ссылку только один раз в классе?

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

}); * * 1 010

Лучший результат, который я могу получить:

.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

что мне нужно, это:

.aboutInfo
http://link1.com

.aboutInfo
http://link2.com

и т.д ...

Я не могу понять это по myselft: (

Answer 1

это должно работать

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

Ключ заключается в добавлении внутри цикла .each ... таким образом, getImageLink будет правильным значением (оно находится в области видимости) и будет добавляться к каждой ссылкеодин раз.

ОБНОВЛЕНИЕ: Чтобы ответить на вопрос, заданный в комментариях, вам не нужно иметь текст в ссылке, чтобы она работала.CSS может быть просто так:

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

В любом случае, вопрос о том, почему ссылка не имеет текста, на самом деле не является вопросом ОП, но, надеюсь, это объяснение поможет всем, кому это интересно.