jQuery Traversing - Irmãos
Com jQuery você pode percorrer lateralmente na árvore DOM para encontrar irmãos de um elemento.
Irmãos compartilham o mesmo pai.
Travessia lateral na árvore DOM
Existem muitos métodos jQuery úteis para percorrer lateralmente na árvore DOM:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
Método jQuery irmãos()
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();
});
Você também pode usar um parâmetro opcional para filtrar a pesquisa por irmãos.
O exemplo a seguir retorna todos os elementos irmãos <h2>que são <p>
elementos:
Exemplo
$(document).ready(function(){
$("h2").siblings("p");
});
Método jQuery next()
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();
});
Método jQuery nextAll()
O nextAll()método retorna todos os próximos elementos irmãos do elemento selecionado.
O exemplo a seguir retorna todos os próximos elementos irmãos de
<h2>:
Exemplo
$(document).ready(function(){
$("h2").nextAll();
});
Método jQuery nextUntil()
O nextUntil()método retorna todos os próximos elementos irmãos entre dois argumentos fornecidos.
O exemplo a seguir retorna todos os elementos irmãos entre a <h2>e um <h6>elemento:
Exemplo
$(document).ready(function(){
$("h2").nextUntil("h6");
});
Métodos jQuery prev(), prevAll() e prevUntil()
Os métodos prev(), prevAll()e prevUntil()funcionam exatamente como os métodos acima, mas com funcionalidade reversa: eles retornam elementos irmãos anteriores (retrocedem ao longo dos elementos irmãos na árvore DOM, em vez de avançar).
Exercícios de jQuery
Referência de travessia do jQuery
Para uma visão geral completa de todos os métodos de travessia do jQuery, acesse nossa Referência de travessia do jQuery .