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:

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

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:

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

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.