tengo un boton Cuando hago clic en él, me gustaría ver en la consola el número de entrada actual que está justo antes de mi elemento de botón (este no es el objetivo final, pero si puedo hacerlo, el resto no será un problema).
Todo lo que obtengo usando mi código es undefined . ¿Alguien puede explicarme qué es lo que está mal y cómo hacerlo?
$(".ajoutPanier").click(function() { var nb = $(this).prev(".inputNbArt").val(); console.log(nb); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="nbArticles"> <input class="inputNbArt" type="number" max="10" min="1" value="1"> </form> <a href="#openModal"> <button class="ajoutPanier">Ajouter Au panier</button> </a>Hay dos problemas aquí. En primer lugar, tener un elemento de button dentro de a elemento es HTML no válido. Sugeriría quitar el button y colocar la class que tenía en la a en su lugar. Luego puede usar CSS para diseñar el a según sea necesario.
En segundo lugar, el método de cruce DOM que está utilizando no es del todo correcto. El elemento .inputNbArt es un elemento secundario del form , no un hermano del .ajoutPanier en el que se hizo clic. Para corregir eso, use prev() para obtener el form hermano y luego find() . Prueba esto:
$(".ajoutPanier").click(function() { var nb = $(this).prev('.nbArticles').find('.inputNbArt').val(); console.log(nb); }); /* example button styling */ a.ajoutPanier { background-color: #CCC; display: inline-block; padding: 5px 10px; margin: 5px 0; border-radius: 5px; box-sizing: border-box; text-decoration: none; color: #000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="nbArticles"> <input class="inputNbArt" type="number" max="10" min="1" value="1"> </form> <a href="#openModal" class="ajoutPanier">Ajouter Au panier</a>Debido a que su HTML no es válido (consulte el comentario , no podemos estar seguros de cómo se verá el DOM en un navegador determinado, ya que pueden hacer lo que sea necesario para que la estructura sea válida).
Cuando haga clic en el botón, this dentro del controlador será ese elemento de button . prev solo encuentra hermanos anteriores, pero el elemento que está buscando no es un hermano, es un hijo del hermano anterior del padre del botón ( si el navegador no reubica el button , lo que muy bien podría).
Podrías usar:
$(this).parent().prev().find(".inputNbArt")pero es bastante frágil. En su lugar, considere poner toda esta estructura en un elemento principal y luego:
$(this).closest("selector-for-parent-element").find(".inputNbArt")