Função closest() da jQuery

Introduzida na versão 1.3 do jQuery [bb] a função closest() retorna o elemento pai mais próximo encontrado. Conforme o seletor passado no parâmetro. Complicado? Não! Veja o exemplo:

Digamos que ao clicar em um link em determinada linha de uma tabela você queira alterar a cor de fundo de toda a linha.

Segue o código:

$(document).ready(function(){
	$("a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
});

Na linha 2 atribuímos uma função ao evento click dos elementos a (links).

Na linha 3 usamos a função closest() com o seletor tr. Ou seja, buscamos o elemento tr mais próximo ao link que foi clicado que é retornado através do objeto this.

Na mesma linha 3 usamos a função toggleClass para atribuir à linha a class highlight. A função toggleClass alterna o atributo class de modo que caso o elemento tenha a classe, a mesma é retirada. E vice-versa.

Reparem que fizemos as chamadas as funções closest() e toggleClass() de forma encadeada. Ou seja, em sequencia.
Caso tenham dúvidas sobre o encadeamento de funções ou sobre a função toggleClass, podem perguntar através dos comentários.

Na linha 4 usamos return false para que o evento do clique no link seja cancelado no browser.

Simples assim! Clique aqui para ver o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

Julio Bitencourt: dia 18 de agosto de 2009

Pedro Rogério disse:

Não conhecia essa função. Muito boa a dica. Abraços.
19 de agosto de 2009 às 9:15 am
Alexsandro disse:

Perfeito.. muito boa esta função, era o tempo q se devia fazer algoritmos pra esta funcionalidade javascript.
19 de agosto de 2009 às 10:18 am
Djalma Toledo disse:

Executei perfeitamente, a função é simples e muito útil.
Valew pelo post julio
26 de agosto de 2009 às 10:32 am
Tiago Faustino disse:

Já querbrei bastante a cabeça pra resolver problemas com parent no jQuery. Essa função demorou, mas veio com tudo! Valeu pela explicação.
27 de agosto de 2009 às 5:46 pm
admin disse:

@Tiago
Também já quebrei muito a cabeça e nos momentos de maior desespero era parent().parent().parent()
27 de agosto de 2009 às 8:47 pm
Marcos Duarte disse:

Amigo, vc. poderia dar um exemplo com esta função live() para abrir uma página que contenha um grid com estilos, em uma div tipo “centro”, sem que ela perca seus estilos. Obrigado
2 de fevereiro de 2010 às 2:56 pm
Julio Bitencourt disse:

Olá Marcos.

Você pode especificar melhor sua necessidade? Se quiser me mande via email: contato[arroba]juliobitencourt.com
3 de fevereiro de 2010 às 1:48 pm