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> :
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:
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> :
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> :
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:
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 .