Siguiente elemento + JQUERY

Question

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

Answer 1

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

Answer 2

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

Answer 3

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?

Answer 4

Gracias Asier, entonces Sibling refiere a hermanos por ser descendientes del mismo padre sin importar el
"tipo de hermano"?

Answer 5

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

Answer 6

Gracias Asier, gracias Alberto.