在jQuery的.closest()中使用类名

Question

我正在尝试进行一些"累计总和"的计算，这是我的代码:

$('.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 quantity = £15 item1的总费用。 calcTotal()函数仅更新订单的总费用。问题在于保持所有计算都在表格的一行中，即在上面的代码中进行计算，但它没有保持在所属的行，而是更新了所有具有.class .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();
            });     

- benhowdle89

---

这里看起来不对的代码行是 $('.cost_of_items').closest('.cost_of_items')。你能同时展示一下你的HTML代码吗？ - lonesomeday

((ValOne) * (ValTwo)) 中的所有括号都没有任何作用。 - Bjorn

@user - 在你的.append()中缺少一个闭合的</td>标签。 - user113716

Answer 1

你需要在包含this的<tr>中找到.cost_of_items。

$(this).closest('tr').find('.cost_of_items')

- SLaks

Answer 2

Closest方法可以找到最近的祖先元素（父元素、祖父元素），但是您还需要使用find方法才能找到要更新的正确元素。例如，如果您在表格行中有一个元素，并且您需要该行中的另一个元素：

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

编辑：

在你的情况下，你会想要

$(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2));

- Keith Rousseau

Answer 3

我不会使用.find()。我猜最好的做法是向上遍历到最近的<td>，然后使用jQuery的.siblings()方法获取具有.cost_of_items类的兄弟<td>。

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

- user113716

---

cost_of_items不是兄弟节点 - 它是兄弟节点的后代。 - Keith Rousseau

@Keith - 感谢你的点踩，但你错了。 <td class="cost_of_items"></td>。 - user113716

抱歉 - 我看得很快，以为它是 tr。我会取消我的投票。 - Keith Rousseau

Answer 4

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

- Bjorn

---

上下文参数只是使返回的结果必须在特定祖先的上下文中。因为 .cost_of_items 不是 .quantity_input 的祖先，所以仍需要其他方法，如 .find()。 - user113716

是的，你可以因为提问者的代码有问题而对我进行负面评价，他不得不在事件中使用find()和closest()来获取上下文，而不能直接获得。 - Bjorn

不确定你是否在指责我，但如果是的话，我并没有给你点踩。我只是指出了错误。 - user113716

@user - 你的代码没问题。你已经有了接收事件的元素起点，需要相对于该起点获取正确的.cost_of_items元素。沿着它遍历没有问题。 - user113716

对于那些对我认为是一个可以接受的回答进行负评的人，我有一般性的评论。我猜我应该说明一下，你可能应该根据事件绑定的方式已经具备了上下文信息。 - Bjorn

我认为你误解了.closest()方法或其上下文参数的工作方式。.closest()方法仅查找祖先元素。因为目标元素不是this的祖先，所以.closest()无法找到它。上下文所做的只是将祖先限制在上下文内的那些元素。 - user113716