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.

Your comment

*

*