Navegação jQuery - Irmãos (siblings)

Com jQuery, podemos facilmente percorrer horizontalmente a árvore DOM para encontrar elementos同级.

Os elementos irmãos são aqueles que compartilham o mesmo pai.

Neste capítulo, explicaremos como percorrer horizontalmente a árvore DOM.

Percorrer horizontalmente a árvore DOM

Temos os seguintes métodos jQuery para percorrer a árvore DOM horizontalmente:

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

Este capítulo mostrará como usar cada método.

Método siblings() do jQuery

jQuery siblings()O método retorna todos os elementos同级 do elemento selecionado.

O exemplo a seguir retorna todos os elementos同级 de cada <li> elemento com o nome de classe "middle":

$(document).ready(function(){
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

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

O exemplo a seguir retorna todos os elementos同级 de cada item de lista com a classe "bold":

$(document).ready(function(){
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

Método next() do jQuery

jQuery next()O método retorna o próximo elemento同级 que está imediatamente após o elemento selecionado.

O exemplo a seguir retorna o elemento同级 seguinte de cada DIV:

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

Método nextAll() do jQuery

jQuery nextAll()O método retorna todos os elementos同级 seguintes do elemento selecionado.

O exemplo a seguir retorna todos os elementos同级 seguintes de cada DIV:

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

Método prev() do jQuery

jQuery prev()O método retorna o elemento irmão anterior, que está imediatamente antes do elemento selecionado.

O exemplo a seguir retorna o elemento同级 anterior de cada DIV:

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

Método prevAll() do jQuery

jQuery prevAll()O método retorna todos os elementos同级 precedentes do elemento selecionado.

A exemplo a seguir retorna todos os elementos同级 precedentes de cada DIV:

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

Métodos nextUntil() e prevUntil() do jQuery

jQuery nextUntil()O método retorna todos os elementos de同级 após os dois parâmetros dados.

jQuery prevUntil()O método retorna todos os elementos de同级 antes dos dois parâmetros dados.

Os seguintes exemplos retornam no <dt id="term-2">Todos os seguintes irmãos até o próximo <dt>:</dt>

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-cor", "coral");
});

Os seguintes exemplos retornam <dt id="term-2">Todos os irmãos anteriores, até o <dt> anterior:</dt>

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-cor", "coral");
});

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.