jQuery Atravessando

❮ Anterior Próxima Capítulo ❯

Irmãos compartilham o mesmo pai.

Com jQuery você pode atravessar para o lado na árvore DOM para encontrar irmãos de um elemento.

Atravessando de lado no DOM Árvore

Existem muitos métodos jQuery úteis para atravessar para o lado na árvore DOM:

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() Método

O siblings() método retorna todos os elementos irmãos do elemento selecionado.

O exemplo a seguir retorna todos os elementos irmãos de <h2> :

Exemplo

$(document).ready(function(){
$("h2").siblings();
});

Tente você mesmo "

Você também pode usar um parâmetro opcional para filtrar a busca por irmãos.

O exemplo a seguir retorna todos os elementos irmãos de <h2> que são <p> elementos:

Exemplo

$(document).ready(function(){
$("h2").siblings("p");
});

Tente você mesmo "

jQuery next() Método

O next() método retorna o próximo elemento irmão do elemento selecionado.

O exemplo a seguir retorna o próximo irmão de <h2> :

Exemplo

$(document).ready(function(){
$("h2").next();
});

Tente você mesmo "

jQuery nextAll() Método

O nextAll() método retorna todos os elementos irmãos próximos do elemento selecionado.

O exemplo a seguir retorna todos os elementos próximo irmão de <h2> :

Exemplo

$(document).ready(function(){
$("h2").nextAll();
});

Tente você mesmo "

jQuery nextUntil() Método

O nextUntil() método retorna todos os elementos próximo irmão entre dois argumentos dados.

O exemplo a seguir retorna todos os elementos irmãos entre um <h2> e um <h6> elemento:

Exemplo

$(document).ready(function(){
$("h2").nextUntil("h6");
});

Tente você mesmo "

jQuery prev(), prevAll() & prevUntil() Métodos

O prev(), prevAll() e prevUntil() métodos funcionam exatamente como os métodos acima, mas com funcionalidade inversa: eles retornam irmão elementos anteriores (atravessar para trás ao longo elementos irmãos na árvore DOM, em vez de para a frente).

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»