Difference between . Closest() and . find()

Question

I’m trying to get the value .text() of an element in the GIFT by the name of his class, when searching saw that jQuery provides at least 2 ways to search for the element by its class:

• The .closest, which according to what I understood from your documentation, picks up the first element corresponding to the filter by testing the element and its ancestors...

• The .find, which according to what I understood from your documentation, picks up the first element corresponding to the filter by testing the element and its descendants...

But his operation seems to me the same and I couldn’t highlight a solid difference.

What I would like is simply an example that requires the use of one or the other to fix their differences and what differs in the way they function, because I know both that make the search in the GIFT from the attribute of an element.

Answer 1

Closest

Search in your ancestors by items that match the selector passed, as specified. That is, searches in items that are up.

Consider the following structure:

<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>

Now imagine you intend that every time you click one <a>, that the color of <tr> in which it is inserted changes. In this case closest("tr") gives exactly the <tr> closer up in the DOM:

$("a").on("click", function(){
  $(this).closest("tr").toggleClass("cor");
});

.cor {
  background-color:cyan;
}

td {
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>

Note that if you change this closest for find will not work because the find just search in the children of the element where the search begins. Soon doing $(this).find in the <a> will search in the descending/child elements of <a> where there will be no <tr>.

See how doesn’t work:

$("a").on("click", function(){
  $(this).find("tr").toggleClass("cor");
});

.cor {
  background-color:cyan;
}

td {
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>

Documentation for the closest

Find

This method is used when you need to find elements descendants/children, match the specified selector.

Taking also the previous structure we can change the goal so that each time the user click a line(<tr>) all of its <a> change colors.

$("tr").on("click", function(){
  $(this).find("a").toggleClass("cor");
});

.cor {
  background-color:cyan;
}

td {
  padding:10px;
}

tr {
  background-color:gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>

I slightly changed the style to make it clear that you only need to click on the gray area, which is the area covered by <tr>.

In this case also can not change find for closest otherwise the code will try to find a <a> above the <tr> that there is no.

Same example with closest to see that doesn’t work:

$("tr").on("click", function(){
  $(this).closest("a").toggleClass("cor");
});

.cor {
  background-color:cyan;
}

td {
  padding:10px;
}

tr {
  background-color:gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>

Documentation for the find