El uso de un nombre de clase en .closest de jQuery()

Question

que estoy tratando de hacer algunos cálculos para un "total acumulado", esto es mi código:

$('.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 es una entrada, es la .price precio del producto, .cost_of_items es donde quiero actualizar el costo total del artículo, es decir. item1 = £ 5 x 3 cantidad = £ 15 total para item1 calcTotal() es una función que simplemente actualiza el costo total del pedido. El problema es mantener todas las matemáticas en una fila de la tabla, es decir, estoy haciendo el cálculo en el código anterior y no se está pegando a su fila, está actualizando todos los campos con clase .cost_of_items etc ...

el problema con mostrar mi html es que su agregado dinámicamente por .appends jQuery() pero aquí es el jQuery relevante:

$('#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:

solución de trabajo:

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

Usted la necesidad de encontrar la .cost_of_items en el <tr> contiene this:

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

Answer 2

Más cercano encontrará el ancestro más cercano (padre, abuelo), pero luego tendrá que hacer un hallazgo para encontrar el elemento correcto para actualizar. Por ejemplo, si tiene un elemento en una fila de la tabla y que necesita un elemento más de esa misma fila:

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

Editar:

En su caso, tendrá que

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

Answer 3

No es necesario que use find. closest takes a context argument. eso te ayuda a reducir el campo de búsqueda. Deberías usar eso.

Answer 4

No utilizaría .find(). Supongo que probablemente sea un poco más eficiente atravesar hasta el <td> más cercano y obtener el hermano <td> con la clase .cost_of_items usando jQuery's .siblings() method.

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

---

EDIT: Para aclarar, aquí está el margen de beneficio de la .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>