35

我正在尝试对“运行总计”进行一些计算，这是我的代码：

$('.quantity_input').live('change',function(){         
                var ValOne = parseFloat($(this).val());
                var ValTwo = parseFloat($(".price").text())
                var totalTotal = ((ValOne) * (ValTwo));                         
                $('.cost_of_items').closest('.cost_of_items').text(totalTotal.toFixed(2));
                calcTotal();
            });

.quantity_input 是输入，.price 是产品的价格，.cost_of_items 是我要更新商品总成本的地方，即。item1 = £5 x 3 数量 = item1 总计 £15 calcTotal() 是一个仅更新订单总成本的函数。问题是将所有数学运算保留在表格的一行中，即我在上面的代码中进行计算并且它没有坚持它的行，它使用类 .cost_of_items 等更新所有字段......

显示我的 html 的问题是它由 jQuery .appends() 动态添加，但这里是相关的 jQuery：

$('#items').append('<tr class="tableRow"><td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a><td class="om_part_no">' + omPartNo + '</td><td>' + supPartNo + '</td><td>' + cat + '</td><td class="description">' + desc + '</td><td>' + manuf + '</td><td>' + list + '</td><td>' + disc + '</td><td><p class="add_edit">Add/Edit</p><input type="text" class="quantity_input" name="quantity_input" /></td><td class="price_each_nett price">' + priceEach + '</td><td class="cost_of_items"></td><td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td></tr>');

编辑：

工作解决方案：

$('.quantity_input').live('change',function(){         
                var ValOne = parseFloat($(this).val());
                var ValTwo = parseFloat($(this).closest('tr').find('.price').text())
                var totalTotal = ((ValOne) * (ValTwo));                         
                $(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2));
                calcTotal();
            });
4

4 回答 4

64

您需要.cost_of_items在<tr>包含的内容中找到this：

$(this).closest('tr').find('.cost_of_items')
于 2010-11-04T13:11:46.983 回答
8

Closest 将找到最近的祖先（父母，祖父母），但是您需要进行查找才能找到要更新的正确元素。例如，如果您在表格行中有一个元素，并且在同一行中需要另一个元素：

$('.myElement').closest('tr').find('.someOtherElement');

编辑：

在你的情况下，你会想要

$(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2));
于 2010-11-04T13:11:08.433 回答
3

我不会使用.find(). 我猜它可能会更有效地遍历到最接近的地方并使用jQuery 的方法获取<td>类的兄弟姐妹。<td>.cost_of_items.siblings()

$(this).closest('td').siblings('.cost_of_items');

编辑：为了澄清，这是来自的标记.append()：

<tr class="tableRow">
     <!-- NOTE THAT THE CLOSING </td> IS MISSING FOR THE FIRST <td> -->
    <td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a>
    <td class="om_part_no">' + omPartNo + '</td>
    <td>' + supPartNo + '</td>
    <td>' + cat + '</td>
    <td class="description">' + desc + '</td>
    <td>' + manuf + '</td>
    <td>' + list + '</td>
    <td>' + disc + '</td>
     <!-- TRAVERSE TO HERE -->
    <td>
       <p class="add_edit">Add/Edit</p>
        <!-- START HERE -->
       <input type="text" class="quantity_input" name="quantity_input" />
    </td>
    <td class="price_each_nett price">' + priceEach + '</td>
     <!-- SIBLING IS HERE -->
    <td class="cost_of_items"></td>
    <td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td>
</tr>
于 2010-11-04T13:41:50.477 回答
-2

您不需要使用查找。closest接受一个上下文参数。这可以帮助您缩小搜索范围。你应该使用它。

于 2010-11-04T13:16:29.683 回答