jQuery对每个div的输入值求和？ [复制]

Question

我正在寻找一种在元素内创建输入总和的方法。

我遇到了这个问题，每当我使用每个时，函数本身都会对所有值求和，而不仅仅是 div 中的值。

使用它并没有像希望的那样工作：

$('div').each(function(){
    var sum = 0;

    $(this).find('input').each(function(){
        sum += Number($(this).val());
        });

        $('.sum').val(sum);

});

家里有人可以帮忙：

http://jsfiddle.net/1keyup/q7rL2a38

Answer 1

通过使用$('.sum').val(sum);，您将为所有.sum 输入设置一个值。因此，您只需在每个div 中引用.sum 输入，您可以通过使用$(this).find('.sum').val(sum); 来做到这一点

$('div').each(function(){
  var sum = 0;
  
  $(this).find('input').each(function(){
    sum += Number($(this).val());
  });
  
  $(this).find('.sum').val(sum);
  
});

div{
  margin: 10px;
  padding: 7px
}

input{ padding: 3px 5px; font-family: monospace; width: 50px}
div:first-child{
  border: 1px solid grey;
  background-color: rgba(0, 0, 0, 0.1);
}
div:nth-child(2){
  border: 1px solid blue;
  background-color: rgba(0, 0, 255, 0.1);
}
div:nth-child(3){
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="text" class="tosum" value="1"/> +
  <input type="text" class="tosum" value="1"/> = 
  <input type="text" class="sum"/>
</div>

<div>
  <input type="text" class="tosum" value="2"/> +
  <input type="text" class="tosum" value="5"/> = 
  <input type="text" class="sum"/>
</div>

<div>
  <input type="text" class="tosum" value="3"/> +
  <input type="text" class="tosum" value="3"/> = 
  <input type="text" class="sum"/>
</div>