Selector jQuery next(): Seleccionar el siguiente elemento

Nuevo repaso al selector de jQuery next(), su funcionalidad es la de seleccionar únicamente el siguiente elemento a uno previamente especificado.

Otras funciones de jQuery para trabajar con selectores son:

• nextAll()
• prev()
• prevAll()

Sintaxis de jQuery next()

Veamos la sintaxis extraída de su web oficial:

$(selector).next(siguiente_elemento);

Os explico el código superior:

• selector (Obligatorio): Es el elemento que especificamos desde el cual se buscará el siguiente elemento que queremos encontrar/seleccionar.
• siguiente_elemento: Es el siguiente elemento que queremos encontrar después del elemento especificado. Si se omite cogerá el siguiente elemento que encuentre después del especificado.

Tal y como podéis ver la sintaxis es sencilla pero conviene aclarar 2 casos:

• El siguiente elemento que queremos seleccionar debe estar juesto después al especificado. Por ejemplo, si tenemos <p> + <h1> + <img> y selecionamos  $(«p + img») no seleccionaría la imagen ya que no es el siguiente elemento después de <p>.
• El siguiente elemento no puede ser un elemento hijo, este elemento a seleccionar debe estar fuera del elemento especificado.

Ejemplos de jQuery next()

Vayamos con varios ejemplos de la función next():

$("#boton").click(function(){
   $("#parrafo").next("p").hide(3000);
});

En este primer ejemplo:

• Detectamos el click del elemento con id = boton.
• Detectamos con next() el siguiente elemento <p> que esté justo después de un elemento con id = parrafo.
• Con hide() ocultamos ese elemento detectado.

El código HTML del ejemplo es el siguiente:

<input type="button" name="prueba" id="boton" value="Cicka para que desaparezca el primer párrafo">

<div id="parrafo"><p>Al clickar el botón el siguiente párrafo después de este tiene que desaparecer.</p></div>

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

Veamos este segundo ejemplo el fallo a la hora de seleccionar el ememento:

$("#boton2").click(function(){
    $("#parrafo2").next("p").hide(3000);
});

El código jQuery es similar, pero tal y comprobamos en el código HTML inferior entre el elemento con id = parrafo y el elemento ‘p’ hay un elemento ‘span’, por lo que al no darse el caso de que haya un ‘p’ justo después del elemento con id = parrafo no se desencadena el efecto de ocultar el elemento.

<div id="parrafo2"><p>Al clickar el botón no funcionará next porque el entre el elemento seleccionado y el primer elemento 'p' hay un elemento 'span', por lo que no es el siguiente elemento.</p></div>

<span>Este es un elemento 'span'</span>

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