none
Siguiente elemento + JQUERY RRS feed

  • Pregunta

  • Amigos desarrolladores, hay forma mediante algún selector para obtener el siguiente elemento no hermano?:

    <input type="button" ...>

    <div class='someClass'>...</div>

    Quiero recuperar el div a partir del botón, yo tengo la referencia del botón y hasta ahora tengo lo siguiente:

    boton.parent().find('div.someClass')

    Funciona, pero no quiero subir al padre y buscar el div, hay forma de obtener el siguiente elemento de manera directa, ya veo que el método $.Next() es sólo para elementos hermanos

    sábado, 17 de febrero de 2018 16:56

Respuestas

  • No lo he probado, pero creo que debería funcionar así:

    El selector "X+Y" selecciona los elementos Y que estén inmediatamente precedidos por un elemento X.

    Por lo tanto deberías encontrar tu div usando algo así como

    "input[type=button]+div.someClass"

    (obviamente añadiendo lo que corresponda en la parte del botón para distinguirlo de otros botones).

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:06
  • Pero si los dos elementos están seguidos tienen el mismo padre y por tanto son hermanos.

    Debería funcionarte con "button.next()"


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:11
  • Eso es el concepto de padres, hijos, hermanos hace referencia a su posición en el árbol jerárquico del DOM.

    Ten en cuenta que todos estos elementos "heredan" de un tipo base "HTMLElement".

    Por lo que a la hora de recorrer el DOM no hay diferencia. Es a la hora de analizar un nodo concreto cuando se puede particularizar por tipo u otros atributos.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:21

Todas las respuestas

  • No lo he probado, pero creo que debería funcionar así:

    El selector "X+Y" selecciona los elementos Y que estén inmediatamente precedidos por un elemento X.

    Por lo tanto deberías encontrar tu div usando algo así como

    "input[type=button]+div.someClass"

    (obviamente añadiendo lo que corresponda en la parte del botón para distinguirlo de otros botones).

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:06
  • Pero si los dos elementos están seguidos tienen el mismo padre y por tanto son hermanos.

    Debería funcionarte con "button.next()"


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:11
  • Gracias Alberto, intente hacerlo de esa manera pero al tener la referencia no sabía como armar la expresión, hice algo como:

    let div = $('ref + div.someClass')

    pero no funcionó (ref es la variable que contiene la referencia al botón)

    Intenté hacerlo con el método Next y para mi sorpresa funcionó:

    let div = $(ref).Next('div.someClass');

    "...the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements."

    Por la documentación entiendo que el método Next sólo debería buscar elementos "hermanos" (del mismo tipo, es decir: button), ¿no estoy entendiendo bien?


    sábado, 17 de febrero de 2018 17:12
  • Gracias Asier, entonces Sibling refiere a hermanos por ser descendientes del mismo padre sin importar el
    "tipo de hermano"?
    sábado, 17 de febrero de 2018 17:16
  • Eso es el concepto de padres, hijos, hermanos hace referencia a su posición en el árbol jerárquico del DOM.

    Ten en cuenta que todos estos elementos "heredan" de un tipo base "HTMLElement".

    Por lo que a la hora de recorrer el DOM no hay diferencia. Es a la hora de analizar un nodo concreto cuando se puede particularizar por tipo u otros atributos.


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta devinnova sábado, 17 de febrero de 2018 18:31
    sábado, 17 de febrero de 2018 17:21
  • Gracias Asier, gracias Alberto.
    sábado, 17 de febrero de 2018 18:31