Los últimos tutoriales de desarrollo web
 

jQuery Atravesando - Hermanos


Hermanos comparten el mismo padre.

Con jQuery se puede recorrer de lado en el árbol DOM para encontrar los hermanos de un elemento.


Atravesando lado en el árbol DOM

Hay muchos métodos jQuery útiles para atravesar de lado en el árbol DOM:

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

jQuery siblings() Método

El siblings() método devuelve todos los elementos relacionados del elemento seleccionado.

El ejemplo siguiente devuelve todos los elementos relacionados de <h2> :

Ejemplo

$(document).ready(function(){
    $("h2").siblings();
});
Inténtalo tú mismo "

También puede utilizar un parámetro opcional para filtrar la búsqueda de los hermanos.

El ejemplo siguiente devuelve todos los elementos relacionados de <h2> que son <p> elementos:

Ejemplo

$(document).ready(function(){
    $("h2").siblings("p");
});
Inténtalo tú mismo "

jQuery next() Método

El next() método devuelve el siguiente elemento hermano del elemento seleccionado.

El siguiente ejemplo devuelve el siguiente hermano del <h2> :

Ejemplo

$(document).ready(function(){
    $("h2").next();
});
Inténtalo tú mismo "

jQuery nextAll() Método

El nextAll() método devuelve todos los siguientes elementos relacionados del elemento seleccionado.

El ejemplo siguiente devuelve todos los elementos siguiente hermano del <h2> :

Ejemplo

$(document).ready(function(){
    $("h2").nextAll();
});
Inténtalo tú mismo "

jQuery nextUntil() Método

El nextUntil() método devuelve todos los siguientes elementos relacionados entre dos argumentos dados.

El ejemplo siguiente devuelve todos los elementos relacionados entre un <h2> y <h6> elemento:

Ejemplo

$(document).ready(function(){
    $("h2").nextUntil("h6");
});
Inténtalo tú mismo "

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

El prev(), prevAll() y prevUntil() métodos funcionan igual que los métodos anteriores, pero con funcionalidad inversa: regresan los elementos anteriores (hermanos atraviesan atrás a lo largo elementos relacionados en el árbol DOM, en lugar de hacia delante).


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»


jQuery desplazamiento de referencia

Para una visión completa de todos los métodos de jQuery que atraviesan, por favor vaya a nuestra jQuery desplazamiento de referencia .