在 jQuery 的 .closest() 中使用类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4096950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a class name in jQuery's .closest()
提问by benhowdle89
I'm attempting to do some calculations for a "running total", this is my code:
我正在尝试对“运行总数”进行一些计算，这是我的代码：
$('.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 is an input, .price is the price of the product, .cost_of_items is where i want to update the total cost for the item, ie. item1 = ￡5 x 3 quantity = ￡15 total for item1 calcTotal() is a function that just updates a total cost for the order. The problem is keeping all the math in one row of the table, ie i'm doing the calc in the code above and its not sticking to its row, its updating all the fields with class .cost_of_items etc...
.quantity_input 是一个输入，.price 是产品的价格，.cost_of_items 是我想更新项目总成本的地方，即。item1 = ￡5 x 3 数量 = ￡15 total for item1 calcTotal() 是一个只更新订单总成本的函数。问题是将所有数学保留在表格的一行中，即我在上面的代码中进行计算并且它不坚持它的行，它用类 .cost_of_items 等更新所有字段......
the problem with showing my html is that its dynamically added by jQuery .appends() but here is the relevant jQuery:
显示我的 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>');
EDIT:
编辑：
Working solution:
工作解决方案：
$('.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();
});
回答by SLaks
You need to find the .cost_of_itemsin the <tr>containing this:
您需要.cost_of_items在<tr>包含中找到this：
$(this).closest('tr').find('.cost_of_items')
回答by Keith Rousseau
Closest will find the closest ancestor (parent, grandparent), but you will then need to do a find in order to find the correct element to update. For example, if you have an element in a table row and you need another element in that same row:
Closest 将找到最近的祖先（父、祖父），但您需要进行查找才能找到要更新的正确元素。例如，如果您在表格行中有一个元素，而在同一行中需要另一个元素：
$('.myElement').closest('tr').find('.someOtherElement');
Edit:
编辑：
In your case, you will want
在你的情况下，你会想要
$(this).closest('tr').find('.cost_of_items').text(totalTotal.toFixed(2));
回答by user113716
I wouldn't use .find(). I'm guessing it will probably be a bit more efficient to traverse up to the closest <td>and get the sibling <td>with the .cost_of_itemsclass using jQuery's .siblings()method.
我不会使用.find(). 我猜它可能会多一点效率遍历到最接近的<td>，并得到了兄弟<td>与.cost_of_items使用类jQuery的.siblings()方法。
$(this).closest('td').siblings('.cost_of_items');
EDIT:To clarify, here's the markup from the .append():
编辑：为了澄清，这是来自以下内容的标记.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>
回答by Bjorn
You don't need to use find. closesttakes a context argument. that helps you narrow down the field of search. You should use that.
您不需要使用查找。closest需要一个上下文参数。这有助于您缩小搜索范围。你应该用那个。
