jQuery Traversing - Ancestrais
Com jQuery você pode percorrer a árvore DOM para encontrar ancestrais de um elemento.
Um ancestral é um pai, avô, bisavô e assim por diante.
Percorrendo a árvore DOM
Três métodos jQuery úteis para percorrer a árvore DOM são:
parent()parents()parentsUntil()
Método jQuery pai()
O parent()método retorna o elemento pai direto do elemento selecionado.
Esse método percorre apenas um único nível na árvore DOM.
O exemplo a seguir retorna o elemento pai direto de cada <span>
elemento:
Exemplo
$(document).ready(function(){
$("span").parent();
});
jQuery Parents() Método
O parents()método retorna todos os elementos ancestrais do elemento selecionado, até o elemento raiz do documento ( <html>).
O exemplo a seguir retorna todos os ancestrais de todos os
<span>elementos:
Exemplo
$(document).ready(function(){
$("span").parents();
});
Você também pode usar um parâmetro opcional para filtrar a pesquisa de ancestrais.
O exemplo a seguir retorna todos os ancestrais de todos os <span>elementos que são <ul>
elementos:
Exemplo
$(document).ready(function(){
$("span").parents("ul");
});
jQuery ParentUntil() Método
O parentsUntil()método retorna todos os elementos ancestrais entre dois argumentos fornecidos.
O exemplo a seguir retorna todos os elementos ancestrais entre a <span>e um <div>elemento:
Exemplo
$(document).ready(function(){
$("span").parentsUntil("div");
});
Exercícios de jQuery
Referência de travessia do jQuery
Para uma visão geral completa de todos os métodos de travessia do jQuery, acesse nossa Referência de travessia do jQuery .