jquery , images, selector

Question

Hello, a I have some images on page and I want to put <span> tag bellow each images, with 'alt' text , with jQuery

I began with :

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>");

but It puts to all <span> the first alt

I need to Obtain :

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

I need to put it in array ?? Or other ideas ??

Help me please, Thank You !!!!!!

Answer 1

try using each

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

or a little nicer (in my opinion)

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