jQueryの.each（）は - 最初の要素ではなく、残り

Question

を表示する私は、ショッピングカート内の項目が含まれている次の表

<table border='1'> 
<thead> 

<tr> 
<th colspan='3'> 
<strong id='jcart-title'>Shopping Cart</strong> (3 Items) 
</th> 
</tr> 

</thead> 
<tfoot> 

<tr> 
<th colspan='3'> 
<input type='submit' id='jcart-checkout' name='jcartCheckout' class='jcart-button' value='checkout' style='display:none' /> 
<span id='jcart-subtotal'>Before Tax Subtotal: <strong>$9.97</strong></span> 
</th> 
</tr> 

</tfoot> 
<tbody> 

<tr> 
<td class='jcart-item-qty' style='background:#FFF;'> 
<input name='jcartItemId[]' type='hidden' value='63927746787' /> 
<input class='qty' id='jcartItemQty-63927746787' name='jcartItemQty[]' size='2' type='text' value='1' /> 
</td> 
<td class='jcart-item-name' style='background:#FFF;'> 
MARTINI OLIVES - STUFFED OLIVES - 5oz 
<input name='jcartItemName[]' type='hidden' value='MARTINI OLIVES - STUFFED OLIVES - 5oz' /> 
</td> 
<td class='jcart-item-price' style='background:#FFF;'> 
<span>$1.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='1.99' /> 
<a class='jcart-remove' href='?jcartRemove=63927746787'>remove</a> 
</td> 
</tr> 

<tr> 
<td class='jcart-item-qty' style='background:#FFF;'> 
<input name='jcartItemId[]' type='hidden' value='FB' /> 
<input class='qty' id='jcartItemQty-FB' name='jcartItemQty[]' size='2' type='text' value='1' /> 
</td> 
<td class='jcart-item-name' style='background:#FFF;'> 
FLASK BAG - PLASTIC - 0 OZ 
<input name='jcartItemName[]' type='hidden' value='FLASK BAG - PLASTIC - 0 OZ' /> 
</td> 
<td class='jcart-item-price' style='background:#FFF;'> 
<span>$1.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='1.99' /> 
<a class='jcart-remove' href='?jcartRemove=FB'>remove</a> 
</td> 

</tr> 
<tr> 
<td class='jcart-item-qty' style='background:#FFF;'> 
<input name='jcartItemId[]' type='hidden' value='011403' /> 
<input class='qty' id='jcartItemQty-011403' name='jcartItemQty[]' size='2' type='text' value='1' /> 
</td> 
<td class='jcart-item-name' style='background:#FFF;'> 
SHAKER - SHAKER - 
<input name='jcartItemName[]' type='hidden' value='SHAKER - SHAKER - ' /> 
</td> 
<td class='jcart-item-price' style='background:#FFF;'> 
<span>$5.99</span><input class='price' name='jcartItemPrice[]' type='hidden' value='5.99' /> 
<a class='jcart-remove' href='?jcartRemove=011403'>remove</a> 
</td> 
</tr> 

</tbody> 
</table> 

を持っている私は.qtyと.price入力を抽出したいです次のjqueryを使用して各項目の値を設定します。注：私は$(body).click(を使用して機能を開始しています。

$('body').click(function() { 
var grandTotal = 0; 
var qty = $('.qty').val(); 
var price = $('.price').val(); 
var subtot = qty * price; $('tr').each(function (i) { 

$('#printorder').html('QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>'); 
}); 

私は... QTY 1行の結果を得る：1を、PRICE：1.99、TOTAL：1.99しかし、表中の3つの項目があります。誰に何が間違っているか考えている人はいますか？

Answer 1

ループのコンテキストを正しく使用していません。また、出力のhtmlを複数回設定しています。

これを試してみてください：

$('body').click(function() { 
var output = ''; 
$('tbody tr').each(function (i) { 
    var qty = $(this).find('.qty').val(); 
    var price = $(this).find('.price').val(); 
    var subtot = qty * price; 
    output += 'QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>'; 
}); 
$('#printorder').html(output); 

編集を。元のコードは次のとおりです。

$('body').click(function() { 
var grandTotal = 0; 
var qty = $('.qty').val(); // sets qty to val of first item in $('.qty') (runs once) 
var price = $('.price').val(); // sets price to val of first item in $('.price') (runs once) 
var subtot = qty * price; 
$('tr').each(function (i) { // loops over all <tr> tags, runs 5 times 
    // sets $('#printorder') innerHtml with values calculated outside of loop (always the same value). 
    // this happens 5 times with the same values, and each time overwrites the last 
    $('#printorder').html('QTY: ' + qty +', PRICE: '+ price +', TOTAL:' + subtot +'<br>'); 
});