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

Question

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 1

You don't need to use find. closest takes a context argument. that helps you narrow down the field of search. You should use that.

Answer 2

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

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

Answer 3

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:

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

Edit:

In your case, you will want

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

Answer 4

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_items class using jQuery's .siblings() method.

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

---

EDIT: To clarify, here's the markup from the .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>