结合eq，parent和index似乎不起作用

Question

所以，我有这个表的一部分：

<tr>
   <td>
      <input type="text" name="value[]" class="value" />
   </td>
   <td>
      <input type="text" name="quantity[]" class="quantity" />
   </td>
</tr>

所以，每当我在特定的.quantity上键入内容时（我有很多<tr>，我已经克隆了它们）我需要＆＃34;的结果（ .value * .quantity）＆＃34;每个<tr>，然后，汇总此<tr>的所有结果。抱歉英语，如果你不明白，请告诉我。

到目前为止我已尝试过：

 totalRow = 0;

$(document).on('input', "[name='quantity[]']", function totalQuantity() {

    rows = $('.table tbody tr').length;

    totalResult = 0;

    for (var n = 0; n < rows; ++ n){
        totalRow = 0;
        quantity = 0;
        value = 0;
        quantity = $('.quantity').eq($($('.quantity')).parent().parent().index(n)).val();
        value = $('.value').eq($($('.value')).parent().parent().index(n)).val();

        totalRow = quantity * value;
        totalResult = totalResult + totalRow;
    }

    $('#totalQuantity').html(totalResult);
});

但这不起作用。总和丢失了，似乎索引是错误的，也许我使用parent（）错了。我不知道。你能帮助我吗？

编辑1：以示例打印

Answer 1

尝试使用.map()，Array.prototype.reduce()

$(document).on('input', "[name='quantity[]']", function totalQuantity() {

   // var sum = $(this).val() * $(this).closest("tr").find(".value").val()
  var sum = $(".quantity").map(function(i, el) {
    return el.value * $(this).closest("tr").find(".value").val()
  
  }).get().reduce(function(a, b) {
    return a + b
  });

   $("#totalQuantity").html(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" name="value[]" class="value" />
      </td>
      <td>
        <input type="text" name="quantity[]" class="quantity" />
      </td>
    </tr>
        <tr>
      <td>
        <input type="text" name="value[]" class="value" />
      </td>
      <td>
        <input type="text" name="quantity[]" class="quantity" />
      </td>
    </tr>
  </tbody>
</table>
<div id="totalQuantity"></div>

Answer 2

而不是对元素使用索引，在每行中使用find()来查找其数量和数量。注意：$(selector, this)是$(this).find(selector)的快捷方式：

e.g。

$(document).on('input', "[name='quantity[]']", function () {
    var $rows = $('.table tbody tr');
    var totalResult = 0;
    $rows.each(function(){
        var quantity = $('.quantity', this).val();
        var value = $('.value', this).val();
        var totalRow = quantity * value;
        totalResult += totalResult;
    });

    $('#totalQuantity').html(totalResult);
});