Navegação jQuery - Descendentes

Com jQuery, podemos facilmente navegar na árvore DOM para encontrar elementos descendentes.

Descendentes são filhos, netos, bisnetos, etc.

Neste capítulo, explicaremos como navegar na árvore DOM.

Navegação na árvore DOM

Temos os seguintes métodos jQuery para navegar na árvore DOM:

• children()

• find()

A seguir, mostraremos como usar cada método.

Método jQuery children()

jQuery children()O método retorna todos os subníveis diretos do elemento selecionado.

Este método navega apenas por um nível na árvore DOM.

O exemplo a seguir retorna todos os elementos filhos diretos do DIV:

$("document").ready(function(){
　　$("div").children().css("background-cor",　"coral");
});

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

Aqui está um exemplo que retorna todos os elementos <p> filhos diretos do DIV:

$("document").ready(function(){
　　$("div").children("p").css("background-cor",　"coral");
});

Método find() do jQuery

jQuery find()O método retorna todos os elementos descendentes que correspondem aos parâmetros especificados.

Este método navega pelos elementos descendentes do DOM, até o último descendente.

Comece por todos os parágrafos e procure elementos descendentes span, como $("p span"):

$("document").ready(function(){
　　$("p").find("span").css("background",　"mediumpurple");
});

Para retornar múltiplos descendentes, separe os nomes dos seletores com vírgula.

Os seguintes exemplos retornam todos os elementos <span> e <i> que são descendentes do elemento <p>:

$("document").ready(function(){
　　$("p").find("span,　i").css("background",　"mediumpurple");
});

Referência de Navegação do jQuery

Para referência completa dos métodos de navegação, acesse nossoReferência de Navegação do jQuery.