html5 - Simple Jquery function won't work -

i have following jquery code

$(document).ready(function() {      for(var i=1;i<4;i++) {          var img= ".img"+i;          var p= ".p"+i;         $(img).on("click", function(){             $(p).hide();          });      }  }); 

applied on following html:

<div>     <article>          <h1>over mezelf <img src='images/plus.png' class='img1'/></h1>          <p class='p1'>test</p>     </article>     <article>          <h1>contact <img src='images/plus.png' class='img2'/></h1>          <p class='p2'>test</p>     </article>     <article>          <h1>website <img src='images/plus.png' class='img3'/></h1>          <p class='p3'>test</p>     </article> </div> 

when click on images, last <p> disappears, doesn't work on other ones.

you need this

$(img).on("click", function(){     $(this).closest('article').find('p').hide();   });  

fiddle

docs

closest()

find()