Question

I am trying to change the <li> html within a each loop but all the LI elements are displaying the same image source. If you take a look at this Fiddle, you will see what i mean.

(http://jsfiddle.net/dxhqL/2/)

I wasnt able to submit just the jsfiddle url so i included the code here as well.
here is the html:

<ul class="gallery-thumbnail">
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg"></li>
</ul>

Here is the JS

$(document).ready(function() {
    $("ul.gallery-thumbnail li img").each(function() {
        $("ul.gallery-thumbnail li").html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");
    }); 
});

Answer 1

You need to select the right image. Use .eq with the very handy index passed into the .each callback:

$("ul.gallery-thumbnail li img").each(function(idx) {
    $("ul.gallery-thumbnail li").eq(idx).html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");
});

http://jsfiddle.net/ExplosionPIlls/dxhqL/3/