Selector jQuery nextAll(): Seleccionar todos los siguientes elementos

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:

$(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:

$("#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:

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