jQuery: .find and .closest at Their Best.

The .closest and .find selectors are complements of each other and when used together are the best way to get to the corresponding element of where the click (or any event) occurred.

The .closest selector always heads upside in the DOM to find the parent that matches the conditions.

<row class="parent_element"> --> parent element
  <div> --> child element
    <a class="child_element" href="javascript:void(0)">Click me!</a>
  </div>
</row>

As i said above, the element will traverses up in the DOM, so we can write it as

$(document).on('click', '.child_element', function(){
    var parentEl = $(this).closest('.parent_element');
});

This may be sound not-useful for single element action scenario in the DOM, but as there are multiple buttons and each perform some different action than the other one, I’d suggest this as the best option to go on with,
as performing different action on each element’s ids or classes would be time consuming and a lot of code.

The .find selector traverses down the DOM where the event occurred, that matches the conditions.
Now, given these, and since the event is always passed as the attribute to the bound function, below is the example to explain this:

<row class="parent_element"> --> parent element
   <div>
      <a class="click_me" href="javascript:void(0)">Click me!</a>
      <div>
         <img src="some static image url"/>
      </div>
   </div>
</row>

For this, we can write it as follows:

$(document).on('click', '.click_me', function(){
   var nextEl = $(this).find('img');
});

Hence, the .find selector traverses downside in the DOM from where the event occurred.
so let us just mixup both these selectors in the single function and see how useful they are.

Let us consider we have to hide/show the images on click of respective buttons above the images.

<row>
    //for the first element
    <div class="parentDiv">
      <a class="click_me_class" href="javascript:void(0)"></a>
      <div class="childDiv">
        <img src="some static image url"/>
      </div>
    </div>    //for the second element
    <div class="parentDiv">
      <a class="click_me_class" href="javascript:void(0)"></a>
      <div class="childDiv">
        <img src="some static image url"/>
      </div>
    </div>    //for the third element
    <div class="parentDiv">
      <a class="click_me_class" href="javascript:void(0)"></a>
      <div class="childDiv">
        <img src="some static image url"/>
      </div>
    </div>
</row>

And the easy Jquery solution for this is here:

$(document).on('click', '.click_me_class', function(){
    var parentEl = $(this).closest('.parentDiv');
    $(parentEl).find('.childDiv').toggleClass('hide');
});

This parent-child concept is very useful and helpful, hope it may helps you too.

Queries are welcomed..
Happy Coding! 😊

please visit this for above example: https://jsfiddle.net/bjerry_25/b7uzmtLL/