The .closest() and .find() are very handy methods in JQuery. These 2 selectors are useful when you want to find corresponding elements where the event has triggered.

  1. .closest():
    This selector traverses up the DOM till it finds the matching element for the supplied selector.

  2. .find():
    This element traverses down the DOM along descendants of supplied DOM element.

Let's take a look at one example of how to use these 2 selectors together.

<form action="/posts/456/attachments">  
<strong>Upload file:</strong>
<br>
<input type="file" name="file">
<br>
 <input type="submit" value="Upload" class="upload-btn">
</form>

The simplest way to get all input elements with type="file" on form submission is as follows:

$('.upload-btn).click( function() {
  $(this).closest('form').find(['input:file'])
});

In this example, you can use these selectors to perform operations like make input file type 'readonly' to prevent the user from changing selected file while the form is getting submitted.