jquery - 如何计算每一行的乘法并用jquery显示

Question

我有一个表单，我想计算 .val 类的字段与 .unit 的乘积，并将其显示在 .ad- 类的字段中每行中的价格项目。我怎样才能用 jquery 做到这一点？

我的表单有很多可以添加或删除的行:

<div class="row">
<input name="datarows[1][radif]" class="uk-form-width-large uk-text-center" value="1" type="text">
<input name="datarows[1][code]" class="uk-form-width-large" placeholder="کد کالا" type="text">
<input name="datarows[1][name]" class="uk-form-width-large" placeholder="نام کالا" type="text">
<input name="datarows[1][value]" class="uk-form-width-large val" placeholder="مقدار" type="number">
<input name="datarows[1][unit]" class="uk-form-width-large unit" placeholder="واحد" type="text">
<input name="datarows[1][unitprice]" class="uk-form-width-large ad-money" placeholder="قیمت واحد" type="text">
<input name="datarows[1][price]" class="uk-form-width-large ad-money ad-price-item" placeholder="قیمت کل" type="text">
</div>


<div class="row">
<input name="datarows[1][radif]" class="uk-form-width-large uk-text-center" value="2" type="text">
<input name="datarows[1][code]" class="uk-form-width-large" placeholder="کد کالا" type="text">
<input name="datarows[1][name]" class="uk-form-width-large" placeholder="نام کالا" type="text">
<input name="datarows[1][value]" class="uk-form-width-large val" placeholder="مقدار" type="number">
<input name="datarows[1][unit]" class="uk-form-width-large unit" placeholder="واحد" type="text">
<input name="datarows[1][unitprice]" class="uk-form-width-large ad-money" placeholder="قیمت واحد" type="text">
<input name="datarows[1][price]" class="uk-form-width-large ad-money ad-price-item" placeholder="قیمت کل" type="text">
</div>

Answer 1

您可以使用 jQuery each 来完成此操作和 find功能:

$('.row').each(function(){
    var value = $(this).find('.val').val() * $(this).find('.unit').val();
    $(this).find('.ad-price-item').val(value);
})