Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies