jquery - how to repeat same Javascript code over multiple html elements -

note: changed code images , texts links.

basically, have 3 pictures same class, different id. have javascript code want apply 3 pictures, except, code needs different depending on picture. here html:

<div class=column1of4> <a href="images/watermark_pic1.jpg"><img src="images/actual.jpg"  id="first"></a> <a href="images/watermark_pic1.jpg"><div id="firsttext" class="spanlink"><p>lots of text</p></div></a> </div>  <div class=column1of4> <a href="images/watermark_pic1.jpg"><img src="images/fake.jpg" id="second"></a> <a href="images/watermark_pic1.jpg"><div id="moretext" class="spanlink"><p>more text</p></div></a> </div>  <div class=column1of4> <a href="images/watermark_pic1.jpg"><img src="images/real.jpg" id="eighth"></a> <a href="images/watermark_pic1.jpg"><div id="evenmoretext" class="spanlink"><p>even more text</p></div></a> </div> 

here javascript id="firsttext":

$('#firstextt').hide(); $('#first, #firsttext').hover(function(){  //in   $('#firsttext').show();  },function(){  //out   $('#firsttext').hide(); }); 

so when user hovers on #first, #firsttext appear. then, want when user hovers on #second, #moretext should appear, etc.

i've done programming in python, created sudo code , this.

text = [#firsttext, #moretext, #evenmoretext] picture = [#first, #second, #eighth]   number in range.len(text) //over here, find out how many elements in text   $('text[number]').hide(); $('text[number], picture[number]').hover(function(){  //in   $('text[number]').show();  },function(){  //out   $('text[number]').hide(); }); 

the syntax way off, that's sudo code. can me make actual javascript code it?

try this

$(".column1of4").hover(function(){     $(".spanlink").hide();     $(this).find(".spanlink").show(); });