jQuery Traversing - Hermanos
Con jQuery, puede desplazarse lateralmente en el árbol DOM para encontrar hermanos de un elemento.
Los hermanos comparten el mismo padre.
Atravesando de lado en el árbol DOM
Hay muchos métodos útiles de jQuery para atravesar lateralmente el árbol DOM:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
Método jQuery hermanos()
El siblings()método devuelve todos los elementos hermanos del elemento seleccionado.
El siguiente ejemplo devuelve todos los elementos hermanos de <h2>:
Ejemplo
$(document).ready(function(){
$("h2").siblings();
});
También puede usar un parámetro opcional para filtrar la búsqueda de hermanos.
El siguiente ejemplo devuelve todos los elementos hermanos de <h2>los que son <p>
elementos:
Ejemplo
$(document).ready(function(){
$("h2").siblings("p");
});
Método jQuery next()
El next()método devuelve el siguiente elemento hermano del elemento seleccionado.
El siguiente ejemplo devuelve el siguiente hermano de <h2>:
Ejemplo
$(document).ready(function(){
$("h2").next();
});
Método jQuery nextAll()
El nextAll()método devuelve todos los siguientes elementos hermanos del elemento seleccionado.
El siguiente ejemplo devuelve todos los siguientes elementos hermanos de
<h2>:
Ejemplo
$(document).ready(function(){
$("h2").nextAll();
});
Método jQuery nextUntil()
El nextUntil()método devuelve todos los siguientes elementos hermanos entre dos argumentos dados.
El siguiente ejemplo devuelve todos los elementos hermanos entre a <h2>y un <h6>elemento:
Ejemplo
$(document).ready(function(){
$("h2").nextUntil("h6");
});
Métodos jQuery prev(), prevAll() y prevUntil()
Los métodos prev(), prevAll()y prevUntil()funcionan igual que los métodos anteriores pero con funcionalidad inversa: devuelven elementos hermanos anteriores (recorren hacia atrás a lo largo de los elementos hermanos en el árbol DOM, en lugar de hacia adelante).
Ejercicios de jQuery
Referencia de cruce de jQuery
Para obtener una descripción general completa de todos los métodos de jQuery Traversing, vaya a nuestra Referencia de jQuery Traversing .