jQuery double .each循环，帮我解决逻辑问题

Question

我需要解决一些计算，并且我使用.each()循环。我动态填充行<tr>，因此我使用.each()循环遍历表格，但是当我必须按vat值对其进行排序时，我无法获得不同的值。

＆＃13;

＆＃13;

function callSum(id) {
    var counter = 1;
    var sum = document.getElementById("sum" + id).value;
    var vat = document.getElementById("vat" + id).value;

    $('.sumall').each(function() {

        $('.vatall').each(function() {
            if ($(this).val() == 0) { //if value of VAT is 0 sum it to vatTotalZero
                document.getElementById("vatTotalZero").value = $(this, ".sumall").val; // don't know how to solve this
            } else { //if value of VAT is > 0 sum it to vatTotal
                document.getElementById("vatTotal").value = $(this, ".sumall").val; // don't know how to solve this
            }
            counter++;
        });

    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<tr>
  <td class="col-sm-1">
  <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control"/>
  </td>
  <td class="col-sm-1">
  <input type="text" name="vat[]" id="vat1" class="vatall form-control  "/>
  </td>
</tr>

<br><br>
<label>All Sums without VAT (vat 0)</label>
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control  "/>

<br><br>
<label>All Sums with VAT (vat > 0)</label>
<input type="text" name="vatTotal" id="vatTotal" class="form-control  "/>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请参阅源代码中的解释性评论。

function callSum(id) {

    var counter = 1,
        sum = document.getElementById("sum" + id).value,
        vat = document.getElementById("vat" + id).value,
        sumallVal;

    $('.sumall').each(function () {

        /* get the value */
        sumallVal = $(this).val();

        $('.vatall').each(function () {

            if ($(this).val() == 0) { //if value of VAT is 0 sum it to vatTotalZero

                //document.getElementById("vatTotalZero").value = $(this, ".sumall").val; // don't know how to solve this
                /* set the value */
                $("#vatTotalZero").val( sumallVal )

            } else { //if value of VAT is > 0 sum it to vatTotal

                //document.getElementById("vatTotal").value = $(this, ".sumall").val; // don't know how to solve this
                /* set the value */
                $("#vatTotal").val( sumallVal )

            }

            counter++;

        });

    });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<tr>
    <td class="col-sm-1">
        <!-- <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control" /> -->
        <input type="text" name="sum[]" id="sum1" onchange="callSum(1)" class="sumall form-control" />
    </td>
    <td class="col-sm-1">
        <input type="text" name="vat[]" id="vat1" class="vatall form-control  " />
    </td>
</tr>
<br>
<br>
<label>All Sums without VAT (vat 0)</label>
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control  " />
<br>
<br>
<label>All Sums with VAT (vat > 0)</label>
<input type="text" name="vatTotal" id="vatTotal" class="form-control  " />

这里我们使用增强版本 在这个版本中，我删除了未使用的东西，设置了适当的事件处理程序并略微缩短了语法

function callSum(id) {

    var sum = document.getElementById("sum" + id).value,
        vat = document.getElementById("vat" + id).value,
        sumallVal;

    $('.sumall').each(function () {

        /* get the value */
        sumallVal = $(this).val();

        $('.vatall').each(function () {

            /* set the value */
            $( $(this).val() == 0 ? "#vatTotalZero" : "#vatTotal" ).val( sumallVal )

        });

    });

}


$(document).ready(function() {

    $('.sumall.form-control').on('input', function() {
        // get number id directly from string id by deleting all non numbers
        callSum( this.id.replace(/[^0-9]/gi, '') );
    })

});

<tr>
    <td class="col-sm-1">
        <!-- <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control" /> -->
        <input type="text" name="sum[]" id="sum1" class="sumall form-control" />
    </td>
    <td class="col-sm-1">
        <input type="text" name="vat[]" id="vat1" class="vatall form-control  " />
    </td>
</tr>
<br>
<br>
<label>All Sums without VAT (vat 0)</label>
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control  " />
<br>
<br>
<label>All Sums with VAT (vat > 0)</label>
<input type="text" name="vatTotal" id="vatTotal" class="form-control  " />

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