jquery selectors

Question

I'm having problems selecting the div i want to animate in jquery. I have this html

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img id="slide" src="../../pictures/picture.jpg"><div id="name">Picture name</div></div>  
</a>  
</div> 

I used that markup because i want to slide up the #name over the picture on hover. I have 3 pictures per row and 8 rows and my jquery only targets the first image.

$('#slide').hover(function(){
$(this).parent().find('#name').animate({"bottom" : 0}, 800)
}, function(){
$(this).parent().find('#name').animate({"bottom" : "-20px"}, 800)
});

I even tryed going $('#perimg').children() but that didn't help either.

Answer 1

jQuery will only select the first matching element when checking by ID, but it will select all when checking the class. What happens for you is that it only gets the first image because you're looking for a specific id. Just change it to use classes, and it should work.

Answer 2

Since there are multiple images and divs you want to animate, use classes instead of ids. Also your code is wrong, try this:

HTML:

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img class="slide" src="../../pictures/picture.jpg"><div class="name">Picture name</div></div>  
</a>  
</div> 

jQuery:

$('.slide').hover(function(){
  $(this).find('.name').animate({"bottom" : 0}, 800)
  }, function(){
  $(this).find('.name').animate({"bottom" : "-20px"}, 800)
});