Menu
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...
the problem with showing my html is that its dynamically added by jQuery .appends() but here is the relevant 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(); }); 
602
jQuery closest() Method The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on.
Use the closest() method to get the closest parent element by class, e.g. child. closest('. parent') . The closest() method traverses the Element and its parents until it finds a node that matches the provided selector.
The closest() method searches up the DOM tree for elements which matches a specified CSS selector. The closest() method starts at the element itself, then the anchestors (parent, grandparent, ...) until a match is found. The closest() method returns null() if no match is found.
The this Keyword is a reference to DOM elements of invocation. We can call all DOM methods on it. $() is a jQuery constructor and in $(this), we are just passing this as a parameter so that we can use the jQuery function and methods.
You need to find the .cost_of_items in the <tr> containing this:
$(this).closest('tr').find('.cost_of_items') If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
