JQuery .each(), definiert durch Klasse nicht funktioniert - zeigt erstes Element, aber nicht den Rest

Question

Ich habe die folgende Tabelle, die Artikel in einem Warenkorb enthält

<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> 

I .qty extrahieren möge und .Preis Eingang Werte für jedes Element mit der folgenden jQuery. Hinweis: Ich verwende $(body).click(, um die Funktion zu starten.

$('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>'); 
}); 

ich eine einzeilige Ergebnis ... Menge: 1, Preis: 1,99, TOTAL: 1.99, aber es gibt drei Elemente in der Tabelle. Hat jemand irgendwelche Ideen, was schief läuft?

Answer 1

Sie verwenden den Kontext Ihrer Schleife nicht korrekt. Außerdem legen Sie den HTML-Wert der Ausgabe mehrmals fest.

Versuchen Sie folgendes:

$('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); 

bearbeiten; Hier ist, was Ihr ursprünglicher Code tut:

$('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>'); 
});