Using a class name in jQuery's .closest()

benhowdle89 picture benhowdle89 · Nov 4, 2010 · Viewed 86k times · Source

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

Answer

SLaks picture SLaks · Nov 4, 2010

You need to find the .cost_of_items in the <tr> containing this:

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