# show/hide image in each list individually with same class in jquery

I have a list of images that are used as links and at the bottom of each image there is another image to show/hide. So far all the images show at the same time b/c they have the same class so is there any way to get around that? I don't know how to give them all the unique id.

 <div id="nav">
<ul>
<li id="one" ><a href="#"><img src="mikesfamilyborder.png" class="first" /><p><img src="mikesfamilybordername.png" class="name"/></p></a></li>
<li id="three"><a href="#" ><img src="brennerfamilyborder.png" class="first"  /><p><img src="ryanbfamilyname.png" class="name"/></a></p></li>
<li id="four"><a href="#" ><img src="ryanfamilyborder.png" class="first" /><p><img src="ryanlfamilyname.png" class="name"/></a></p></li>
<li id="five"><a href="#" ><img src="missydadfamilyborder.png" class="first" /><p><img src="lackeysname.png" class="name"/></a></p></li>
<li id="six"><a href="#" ><img src="libbyfamilyborder.png" class="first" /><p><img src="libbysname.png" class="name"/></a></p></li>
</ul>
<p> Click Picture for Family page</p>
</div>

$('.name').hide();$(".first").hover(function () {
$(".name").stop().show(); }, function (){$(".name").stop().hide();
});

-

You need to find the .name item that is in the same block of HTML as the one being hovered. One way to do that is to go up the parent chain from the one begin hovered to get the li tag and then use .find() from thereto find that .name item in that block. You can use this code to do that:
$('.name').hide();$(".first").hover(function() {
$(this).closest("li").find(".name").stop(true).show(); }, function() {$(this).closest("li").find(".name").stop(true).hide();

@RyanLackey - I changed my code to a more robust way than .next() (it won't break if the HTML is modified slightly). –  jfriend00 Nov 18 '12 at 16:36