Closest
Procura nos seus ancestrais por elementos que correspondam ao seletor passado, tal como indicou. Ou seja procura em elementos que estão para cima.
Considere a seguinte estrutura:
<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>
Agora imagine que se pretende que cada vez que clica num <a>
, que a cor do <tr>
no qual ele está inserido se altere. Nesse caso closest("tr")
dá exatamente o <tr>
mais próximo para cima no 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 que se trocar este closest
por find
não irá funcionar pois o find
apenas procura nos filhos do elemento onde começa a procura. Logo fazendo $(this).find
no <a>
irá procurar nos elementos descendentes/filhos de <a>
em que não haverá nenhum <tr>
.
Veja como não funciona:
$("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>
Documentação para o closest
Find
Este método é utilizado quando precisa de encontrar elementos descendentes/filhos, que coincidam com o seletor indicado.
Pegando ainda na estrutura anterior podemos alterar o objetivo para que cada vez que o usuário clique numa linha(<tr>
) todos os seus <a>
mudem de cor.
$("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>
Mudei ligeiramente o estilo para se tornar claro que apenas precisa de clicar na area cinza, que é a area abrangida pelo <tr>
.
Neste caso também não pode trocar find
por closest
senão irá o código irá tentar achar um <a>
que esteja acima do <tr>
que não há nenhum.
Mesmo exemplo com closest
para ver que não funciona:
$("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>
Documentação para o find