responsive design - Target only a certain instance of a <div> within an array with JQuery -

what trying achieve have responsive horizontal , vertical slider use portfolio. issue arises have array of <div>s class 'project. cannot seem target specific instance of each <div>, when element click event within element targeted.

to explain visually: when user clicks on 'right' arrow, jquery should calculate number of <img>s in instance of clicked arrow , cycle through them. error seems come jquery checking total images in <div class=project">s. can see live example here:

http://yaocho-digital.com/portfolio/

here jquery, far:

 $(document).ready(function() {      // amount of projects      var projecttotal = $('.project').length;      // window height      var windowheight = $(window).height();      // create 'clickcounter' variable, not go on project amount, set @ 1 reflect 'nth-child' value of projects created before      var clickcounter = 1;      // animate each window height on 'down' click      $('.down').click(function() {          $('.container').animate({top: '-=' + windowheight}, 'fast');          clickcounter = clickcounter + 1;          if (clickcounter > projecttotal) {             $('.container').animate({top: '0'}, 'fast');             clickcounter = 1;          }     });      // hide images      $('.project > img').hide();      // amount of images in each project      var imagetotal = $('.project > img').length;      // set initial image @ one, not zero, variable can control 'nth-child'      var imagecounter = 1;      // show first <img> of each project      $('.project > img:nth-child(' + imagecounter + ')').show();      // set variable retrieving parent of clicked 'next'      var parentelement = $(this).parent();      $('.next').click(function() {         $('' + parentelement + ' > img:nth-child(' + imagecounter + ')').hide();         $('' + parentelement + ' > img:nth-child(' + imagecounter + ')').next().show();         imagecounter = imagecounter + 1;         if (imagecounter > imagetotal) {             imagecounter = 1;             $('' + parentelement + ' > img').hide();             $('' + parentelement + ' > img:nth-child(' + imagecounter + ')').show();         }         console.log($(this).parent());     });   }); 

see this question. "parentelement" object returning object , not element name (as assuming), there error being thrown:

uncaught error: syntax error, unrecognized expression: [object object] > img:nth-child(1)

try using:

$('.next').click(function() {     $('img:nth-child(' + imagecounter + ')', parentelement).hide();     $('img:nth-child(' + imagecounter + ')', parentelement).next().show();     imagecounter = imagecounter + 1;     if (imagecounter > imagetotal) {         imagecounter = 1;         $('img', parentelement).hide();         $('img:nth-child(' + imagecounter + ')', parentelement).show();     }     console.log($(this).parent()); });