Any Ideas how to iterate an element in the each loop in jQuery from within a click function within it?

Question

I have a click function inside an each loop in jQuery, I need to iterate the element of the each loop from within the click function, anyone has an Idea how? I know that $(this) in the scenario below will result in the element of the click() Is there any way i can iterate the element in the each loop. Basically i want to get .innocentGrandChild for each of the innocentParent.

here is a sample of how my code looks like:

    $(".innocentParent").each(function(){
   $(".thumbnail").click(function(){
  ///HERE IS MY PROBLEM $(this) should be the element of the 'each' loop: '.innocentParent'
    $(this).find(".innocentGrandChild").hide();

    });
});

<div class="innocentParent">
    <div class="problemChild">
         <div class="innocentGrandChild">

        </div>
    </div>

 <div id="thumbnails">
  <div class="thumbnail">1</div>
   <div class="thumbnail">2</div>
   <div class="thumbnail">3</div>
  </div>

</div>

 <div class="innocentParent">
    <div class="problemChild">
         <div class="innocentGrandChild">

        </div>
    </div>

<div id="thumbnails">
  <div class="thumbnail">1</div>
   <div class="thumbnail">2</div>
   <div class="thumbnail">3</div>
  </div>


</div>

 <div class="innocentParent">
    <div class="problemChild">
         <div class="innocentGrandChild">

        </div>
    </div>

<div id="thumbnails">
  <div class="thumbnail">1</div>
   <div class="thumbnail">2</div>
   <div class="thumbnail">3</div>
  </div>

</div>

Sorry guys I forgot to ADD 1 important factor, I am actually clicking 1 of the group of the elements outside of the .innocentParent This is where Im having the problem, lets ignore the actual function of the script, Im only having trouble with iterating to the right child element for each of the innocentParent

Explaination: on click of each of the thumbnails within the each container "innocentParent" I need to hide the right "innocentGrandChild" - sorry for any mis directions

Answer 1

It is not obvious from the code what the intended behavior is, but I am guessing you may want to hide the matching innocentGrandChild, based on the ordinal position (index) of the thumbnail clicked.

If so try this way:

$(".thumbnail").click(function () {
    var index = $(this).index();
    $('.innocentParent').eq(index).find(".innocentGrandChild").hide();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/bp77dxgm/2/

if this is not the intended behavior, please explain it in more detail.