Navegação - Ancestrais do jQuery

Ascendente é pai, avô ou bisavô, etc.

Através do jQuery, você pode percorrer o DOM ascendente para encontrar ascendentes de um elemento.

Percorrer o DOM ascendente

Estes métodos jQuery são muito úteis, pois são usados para percorrer o DOM ascendente:

  • parent()
  • parents()
  • parentsUntil()

Método parent() do jQuery

O método parent() retorna o elemento pai direto do elemento selecionado.

Este método apenas percorre um nível de um árvore DOM.

O exemplo a seguir retorna o elemento pai direto de cada <span> elemento:

Exemplo

$(document).ready(function(){
  $("span").parent();
});

Experimente você mesmo

Método parents() do jQuery

O método parents() retorna todos os elementos ascendentes do elemento selecionado, subindo até o elemento raiz do documento (<html>).

O exemplo a seguir retorna todos os elementos ascendentes de todos os elementos <span>:

Exemplo

$(document).ready(function(){
  $("span").parents();
});

Experimente você mesmo

Você também pode usar parâmetros opcionais para filtrar a busca por elementos ascendentes.

O exemplo a seguir retorna todos os elementos ascendentes de todos os elementos <span>, e é o elemento <ul>:

Exemplo

$(document).ready(function(){
  $("span").parents("ul");
});

Experimente você mesmo

Método parentsUntil() do jQuery

O método parentsUntil() retorna todos os elementos ascendentes entre dois elementos dados.

O exemplo a seguir retorna todos os elementos ascendentes entre <span> e <div> elementos:

Exemplo

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Experimente você mesmo

Manual de referência de iteração do jQuery

Para saber todos os métodos de iteração do jQuery, acesse nossa Manual de referência de iteração do jQuery.