Navegação jQuery - Irmãos

Os irmãos compartilham o mesmo pai.

Através do jQuery, você pode navegar pelos elementos irmãos na árvore DOM.

Navegação horizontal na árvore DOM

Há muitos métodos úteis que nos permitem navegar horizontalmente na árvore DOM:

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

Método siblings() do jQuery

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

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

Exemplo

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

Experimente você mesmo

Você também pode usar parâmetros opcionais para filtrar a busca por elementos irmãos.

O exemplo a seguir retorna todos os elementos <p> dos elementos irmãos do <h2>:

Exemplo

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

Experimente você mesmo

Método next() do jQuery

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

Este método retorna apenas um elemento.

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

Exemplo

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

Experimente você mesmo

Método nextAll() do jQuery

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

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

Exemplo

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

Experimente você mesmo

Método nextUntil() do jQuery

O método nextUntil() retorna todos os elementos irmãos seguintes entre os dois parâmetros dados.

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

Exemplo

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

Experimente você mesmo

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

prev(), prevAll() e prevUntil() funcionam de maneira semelhante aos métodos acima, mas na direção oposta: eles retornam os elementos irmãos anteriores (na árvore DOM, ao percorrer os elementos irmãos para trás, em vez de para frente).

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

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