Navegación jQuery - Hermanos (siblings)

Con jQuery, podemos navegar fácilmente horizontalmente en el árbol DOM para encontrar elementos同级.

Los elementos hermanos son aquellos que comparten el mismo elemento padre.

En este capítulo, explicaremos cómo realizar la navegación horizontal en el árbol DOM.

Navegación horizontal en el árbol DOM

Tenemos los siguientes métodos de jQuery para la navegación horizontal en el árbol DOM:

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

En este capítulo, le mostraremos cómo usar cada uno de estos métodos.

Método siblings() de jQuery

jQuery siblings()El método devuelve todos los elementos同级 del elemento seleccionado.

El siguiente ejemplo devuelve todos los elementos同级 de cada elemento <li> con el nombre de clase "middle":

$(document).ready(function(){
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

También puede usar parámetros opcionales para filtrar la búsqueda de elementos同级.

El siguiente ejemplo devuelve todos los elementos同级 de cada elemento de lista con la clase "bold":

$(document).ready(function(){
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

Método next() de jQuery

jQuery next()El método devuelve el siguiente elemento同级 que sigue al elemento seleccionado.

El siguiente ejemplo devuelve el elemento同级 posterior de cada DIV:

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

Método nextAll() de jQuery

jQuery nextAll()El método devuelve todos los elementos同级 posteriores del elemento seleccionado.

El siguiente ejemplo devuelve todos los elementos同级 posteriores de cada DIV:

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

Método prev() de jQuery

jQuery prev()El método devuelve el elemento hermano anterior, que está cerca del elemento seleccionado.

El siguiente ejemplo devuelve el elemento同级 anterior de cada DIV:

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

Método prevAll() de jQuery

jQuery prevAll()El método devuelve todos los elementos同级 precedentes del elemento seleccionado.

El siguiente ejemplo devuelve todos los elementos同级 precedentes de cada DIV:

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

Métodos nextUntil() y prevUntil() de jQuery

jQuery nextUntil()El método devuelve todos los elementos hermanos siguientes a los dos parámetros dados.

jQuery prevUntil()El método devuelve todos los elementos hermanos anteriores a los dos parámetros dados.

El siguiente ejemplo devuelve en <dt id="term-2">Todos los hermanos siguientes hasta el siguiente <dt>:

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color", "coral");
});

El siguiente ejemplo devuelve <dt id="term-2">Todos los hermanos anteriores, hasta el <dt> anterior:

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color", "coral");
});

Referencia de búsqueda de jQuery

Para obtener una referencia completa de los métodos de búsqueda, por favor visite nuestraReferencia de búsqueda de jQuery.