Navegação - Descendentes do jQuery

Descendentes são filhos, netos, bisnetos etc.

Através do jQuery, você pode navegar para baixo na árvore DOM para encontrar elementos descendentes.

Navegação para baixo na árvore DOM

A seguir estão dois métodos do jQuery usados para navegar para baixo na árvore DOM:

  • children()
  • find()

Método children() do jQuery

O método children() retorna todos os elementos filhos diretos do elemento selecionado.

Este método apenas navega até o próximo nível da árvore DOM.

O exemplo a seguir retorna todos os elementos filhos diretos de cada <div>:

Exemplo

$("document").ready(function(){
  $("div").children();
);

Experimente você mesmo

Você também pode usar parâmetros opcionais para filtrar a pesquisa de elementos filhos.

O exemplo a seguir retorna todos os elementos <p> com a classe "1", e eles são elementos filhos diretos do <div>:

Exemplo

$("document").ready(function(){
  $("div").children("p.1");
);

Experimente você mesmo

Método find() do jQuery

O método find() retorna os elementos descendentes do elemento selecionado, até o último descendente.

O exemplo a seguir retorna todos os elementos <span> descendentes do <div>:

Exemplo

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

Experimente você mesmo

O exemplo a seguir retorna todos os descendentes do <div>:

Exemplo

$("document").ready(function(){
  $("div").find("*");
);

Experimente você mesmo

Manual de Referência de Navegação do jQuery

Para saber todos os métodos de navegação do jQuery, acesse nosso Manual de Referência de Navegação do jQuery.