親要素に入力量を追加して新しい要素に設定

Question

divテキストとユーザー入力の合計を取得し、新しい範囲に表示する機能を作成しようとしています。私は、同じクラスのすべての入力に対してforeachを使用してこれを動作させるための構造を理解しているようです。

$('#go').on('click', function(){ 
 
\t 
 
    $('.adjust').each(function(){ 
 
    
 
    var sum = 0; 
 
    var cost = $(this).parents().eq(0).find('.cost').data('total'); 
 
    var adjust = parseInt($(this).val(), 10) || 0; 
 
    
 
    $(this.parents().eq(1).find('.total').text(cost - adjust)) 
 

 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<br/><br/> 
 
<input type='button' id='go' value='Go'>

Answer 1

$('#go').on('click', function(){ 
 
\t 
 
    $('.adjust').each(function(){ 
 
    
 
    var sum = 0; 
 
    var cost = $(this).parents().eq(0).find('.cost').data('total'); 
 
    var adjust = parseInt($(this).val(), 10) || 0; 
 
    
 
    $(this).find('.total').text(cost - adjust)) 
 

 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<br/><br/> 
 
<input type='button' id='go' value='Go'>