JQuery, изображения, селектор

Question

У меня есть несколько изображений на странице, и я хочу поставить <span> тег ниже каждой картинки с «альт» текста, с JQuery

Я начал с:

HTML

<div class='container'> 
    <img src='images/1.jpg' alt='text1' /> 
    <img src='images/2.jpg' alt='text2' /> 
    <img src='images/3.jpg' alt='text3' /> 
</div> 

JQuery

$(".container img").after("<span>"+$(".container img").attr('alt')+"</span>"); 

, но он ставит все <span> в первый альт

мне нужно получить:

<div class='container'> 
     <img src='images/1.jpg' alt='text1' /> 
     <span>text1</span> 
     <img src='images/2.jpg' alt='text2' /> 
     <span>text2</span> 
     <img src='images/3.jpg' alt='text3' /> 
     <span>text3</span> 
    </div> 

мне нужно поставить его в массив ?? Или другие идеи?

Помогите мне пожалуйста, спасибо !!!!!!

Answer 1

попробуйте использовать each

$(".container img").each(function() { 
    $(this).after("<span>"+$(this).attr('alt')+"</span>"); 
}); 

или немного лучше (на мой взгляд)

$(".container img").each(function() { 
    $(this).after($("<span/>").text($(this).attr('alt'))); 
});