Repaso a la función de jQuery nextAll(), su funcionalidad es la de seleccionar todos los siguientes elementos a uno previamente especificado.
Otras funciones de jQuery para trabajar con selectores son:
- next()
- prev()
- prevAll()
Sintaxis de jQuery nextAll()
Veamos la sintaxis extraída de su web oficial:
|
1 |
$(selector).nextAll(); |
Os explico el código superior:
- selector (Obligatorio): Es el elemento que especificamos desde el cual se buscarán todos los elementos siguientes al especificado.
Ejemplos de jQuery next()
Vayamos con este ejemplo de la función next() para trabajar con párrafos:
|
1 2 3 |
$("#boton").click(function(){ $("p#tercero").nextAll().hide(3000); }); |
Os explico el código:
- Detectamos el click en el elemento con id = boton.
- Con el selector nextAll() seleccionamos el párrafo (elemento p) con id= tercero para ocultar todos los siguientes elementos a dicho párrafo con la función hide().
El código HTML es el siguiente:
|
1 2 3 4 5 6 7 8 |
<input type="button" name="prueba" id="boton" value="Cicka para que desaparezcan todos los párrafos a partir del tercero"> <p>Párrafo 1 Párrafo 1 Párrafo 1 Párrafo 1 Párrafo 1 Párrafo 1 Párrafo 1 Párrafo 1 </p> <p>Párrafo 2 Párrafo 2 Párrafo 2 Párrafo 2 Párrafo 2 Párrafo 2 Párrafo 2 Párrafo 2 </p> <p id="tercero">Párrafo 3 Párrafo 3 Párrafo 3 Párrafo 3 Párrafo 3 Párrafo 3 Párrafo 3 Párrafo 3 </p> <p>Párrafo 4 Párrafo 4 Párrafo 4 Párrafo 4 Párrafo 4 Párrafo 4 Párrafo 4 Párrafo 4 </p> <p>Párrafo 5 Párrafo 5 Párrafo 5 Párrafo 5 Párrafo 5 Párrafo 5 Párrafo 5 Párrafo 5 </p> <p>Párrafo 6 Párrafo 6 Párrafo 6 Párrafo 6 Párrafo 6 Párrafo 6 Párrafo 6 Párrafo 6 </p> |