jQueryは次の要素を変更します

Question

私はクラスで次の要素を隠そうとしていますが、html構造が混乱していると思います。

HTML：

<tr> 
<td> 
    <input type="number" value="1" name="product_quantity" class="form-quantity" /> 
</td> 
<td><a class="add_to_cart_button" href="#">Add To Cart</a></td> 
</tr> 

JS：

$("tr").each(function() { 
$(this).find(".form-quantity").change(function() { 
    $(this).closest(".add_to_cart_button").hide(); 
}); 
}); 

JSフィドル私が何を意味するかを確認する - https://jsfiddle.net/vpvw6t53/

私は.parentを使用してみましたが、.childrenとここに尋ねるので.sibling :)

Answer 1

感謝。そこで私は答えを更新しました。

$(document).ready(function() { 
    $(".form-quantity").change(function() { 
    $(this).parent().next().find(".add_to_cart_button").hide(); 
    }); 
}); 

また、tr要素をループする必要はないので、コードから削除しました。

$(document).ready(function() { 
 
    $(".form-quantity").change(function() { 
 
    $(this).parent().next().find(".add_to_cart_button").hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <tr> 
 
    <td> 
 
     <input type="number" value="1" name="product_quantity" class="form-quantity" /> 
 
    </td> 
 
    <td><a class="add_to_cart_button" href="#">Add To Cart</a></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="number" value="1" name="product_quantity" class="form-quantity" /> 
 
    </td> 
 
    <td><a class="add_to_cart_button" href="#">Add To Cart</a></td> 
 
    </tr> 
 
</table>