Jquery .each() 由 class 定义无效 - 显示第一个元素但不显示其余元素

Question

我有以下 table 包含购物车中的商品

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

我想使用以下 jquery 提取每个项目的 .qty 和 .price 输入值。注意：我正在使用 $(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>');
});

我得到一行结果...数量：1，价格：1.99，TOTAL:1.99 但 table 中有三项。有谁知道出了什么问题吗？

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

Jquery .each() 由 class 定义无效 - 显示第一个元素但不显示其余元素

Jquery .each() defined by class not working - displays first element but not the rest

html

each

jquery

html-table

class