各リンクをクラスごとに1回だけ追加します

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 

quesionは一度だけ、クラスごとに各リンクを追加する方法ですか？

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

}）;私は得ることができます

最良の結果は次のとおりです。

.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; 
} 

いずれかの方法で、リンクにテキストを持っていない理由の質問は本当にOPの質問のポイントはありませんが、うまくいけば、この説明は好奇心だ、誰に役立ちます。