如何使用 jQuery 更改最近的输入？

Question

我正在编辑 woocomerce 插件。我想创建一个数量按钮，点击时将更改最近的产品数量。

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

那么如何在单击按钮时选择最近的输入？

Answer 1

你需要上一层，找到下一个元素并在里面输入。

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

.parent() 是 .changeQtyButton
.next() 是 .quantity

或者

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