How can I change nearest input with jQuery?

Question

I'm editing woocomerce plugin. I want to create quantity button that will change nearest product quantities when click.

<div class='product-1'>
    <div class='changeQtyButton'>
         <button class='buttonNumber'>1</button>
         <button class='buttonNumber'>2</button>
         <button class='buttonNumber'>3</button>
    <div>
    <div class='quantity'>
         <input class='quantityInput-1'>
    <div>
</div>
<div class='product-2'>
    <div class='changeQtyButton'>
         <button class='buttonNumber'>1</button>
         <button class='buttonNumber'>2</button>
         <button class='buttonNumber'>3</button>
    <div>
    <div class='quantity'>
         <input class='quantityInput-2'>
    <div>
</div>

<script>
    jQuery('button').on('click', function(){
       //inputQty = jQuery(this).next('input').attr('name') ;
        test = jQuery(this).closest( "div.changeQtyButton" ).find("input[name=''quantity]").val();
       console.log(test);
    });
 </script>

So how can I select the nearest input when click the button?

Does this answer your question? [jQuery: find input field closest to button](https://stackoverflow.com/questions/20357017/jquery-find-input-field-closest-to-button) — Harun Yilmaz, May 03 '21 at 08:33
https://stackoverflow.com/questions/37594043/jquery-find-closest-input — Harun Yilmaz, May 03 '21 at 08:33

score 2 · Accepted Answer · answered May 03 '21 at 08:31

You need to go one level up, find next element and input inside.

$('button').on('click', function() {
    $(this).parent().next().find('input')
})

.parent() is .changeQtyButton
.next() is .quantity

Or

$(this).closest('[class^=product-]').find('input')

How can I change nearest input with jQuery?

1 Answers1