Problema:
Quiero (después de hacer clic en un botón, esta parte está bien) seleccionar el elemento más cercano con una clase .my-textarea , pero el uso de prev() no siempre es posible, porque el código es dinámico. ¿Podrías ayudar?
Detalles:
Tengo este código HTML:
<div class="row"> <div class="label">Description:</div> <textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea> <button type="button" class="my-submit" name="my-submit">Save</button> </div>Y mi código JS (en el botón con el evento de clic de clase "my-submit") es:
var text = $(this).closest('.my-textarea').val();
Pero no está funcionando. Me estoy volviendo indefinido.
Si lo intentara:-
var text = $(this).prev().val();
Obtendré el texto del área de texto, pero como mencioné, mi código es dinámico y cambiará el orden y la cantidad de elementos. Entonces, prev() está fuera de opción.
¿Alguna idea de cómo hacer que el closest() funcione?
Siempre selecciono padre y luego busco niño con clase. De esa manera, su elemento se puede colocar prácticamente en cualquier lugar en el elemento principal.
$(this).parent().find('.my-textarea').val();Necesita usar siblings() en lugar de closest() :-
$('.my-submit').click(function(e){ e.preventDefault(); var text = $(this).siblings('textarea').val(); console.log(text); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="label">Description:</div> <textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea> <button type="button" class="my-submit" name="my-submit">Save</button> </div>Necesitas referirlo usando la clase
El más cercano recorrerá el árbol DOM para buscar el elemento, mientras que en este caso el área de textarea es hermano del botón.
$('.my-submit').click(function(){ var text = $(this).siblings('.my-textarea').val(); alert(text) })