page - jQuery: encuentra el campo de entrada más cercano al botón

jquery get name of element

Question

Tengo un formulario HTML grande con varios campos de entrada (uno en cada fila). Entre estos tengo varios campos con una clase específica que aparecen a la izquierda de un botón. No hay otros botones o campos en estas filas, por lo que solo contienen el campo y el botón como se muestra a continuación.

¿Cómo puedo obtener el ID de un campo de este tipo al hacer clic en el botón que se encuentra justo al lado, es decir, más cercano?

Todos los campos en cuestión se ven así:

<input type="text" class="dateField" data-date-format="yyyy-mm-dd" id="field1" name="field1" />

Todos los botones en cuestión se ven así:

<button type="button">Select Date</button>

Gracias por cualquier ayuda con esto, Tim.

Answer 1

Como <input> está a la izquierda de <button> , puedes encontrarlo así:

$(''button'').on(''click'', function(){
    alert($(this).prev(''input'').attr(''id''));
});

Si <input> fue después de <button> entonces puedes encontrarlo así:

$(''button'').on(''click'', function(){
    alert($(this).next(''input'').attr(''id''));
});

Answer 2

Puede ir al padre del botón usando parent() y buscar la entrada en los descendientes usando find()

O, si tienes descendientes de varios niveles

$(this).parent().find(''.dateField'')

O, si tienes descendientes de un solo nivel

$(this).parent().children(''.dateField'')

o

$(this).siblings(''.dateField'');

Del mismo modo puedes usar next() o prev()

Answer 3

Use .prev() o .next() si están uno junto al otro. (Esto debería ser más rápido.) De lo contrario, también puedes usar .closest() para encontrar la instancia más cercana de esa clase.

La documentación debería ser más que suficiente ayuda.

Editar: También puede usar .siblings() para buscar a través de los hermanos de ese elemento.