Return value of each element
<p>I'm new in jQuery and i have some trouble get this thing works.</p>

<pre><code>&lt;ul id="mediaGallery"&gt;
    &lt;li&gt;&lt;a href="#"&gt;https://www.youtube.com/watch?v=YVw7eJ0vGfM&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;https://www.youtube.com/watch?v=LW0k4eOEJ4U&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;https://www.youtube.com/watch?v=_SM7jtNOTXg&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The idea is to get the last part of the url (ex: <strong>YVw7eJ0vGfM</strong>), empty the <code>&lt;a&gt;</code> element and replace it whith an <code>&lt;img&gt;</code> and returning the last part of the url at the end of the src path of the image in order to display a thumbnail of the youtube video dynamically.</p>

<pre><code>//get the content of the &lt;a&gt; element
var video_href = $('#mediaGallery li a').html();

//get the last part of the url
var id_video = video_href.substr(video_href.length - 16);

//predifined img html whith the id of the video
var img_path = $('&lt;img src="http://img.youtube.com/vi/'+id_video+'/0.jpg" /&gt;');

//empty the &lt;a&gt; element
$('#mediaGallery li a').empty();

//insert the img var
$('#mediaGallery li a').append(img_path);
</code></pre>

<p>The problem is that only the first video id is returned and pasted in all <code>&lt;a&gt;</code>.</p>

<p>How can i return each video id not just the first one?</p>

<p>Any help would be greatly apreciated<br>
Thanks.</p>
