L'utilisation d'un nom de classe dans .closest() de jQuery

Question

je tente de faire des calculs pour un « total en cours d'exécution », voici mon 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 est une entrée, .prix est le prix du produit, .cost_of_items est où je veux mettre à jour le coût total de l'article, à savoir. item1 = £ 5 x 3 quantity = £ 15 total pour item1 calcTotal() est une fonction qui met juste à jour le coût total de la commande. Le problème est de garder tous les maths dans une rangée de la table, ie je fais le calc dans le code ci-dessus et il ne colle pas à sa rangée, il met à jour tous les champs avec la classe .cost_of_items etc ...

le problème avec mon code HTML est montrant que sa dynamique ajoutée par .appends jQuery() mais voici la jQuery pertinente:

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

solution de travail:

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

Vous besoin de trouver le .cost_of_items dans le <tr> contenant this:

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

Answer 2

Le plus proche trouvera l'ancêtre le plus proche (parent, grand-parent), mais vous devrez alors faire une recherche pour trouver l'élément correct à mettre à jour. Par exemple, si vous avez un élément dans une ligne de table et vous avez besoin d'un autre élément dans la même ligne:

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

Edit:

Dans votre cas, vous voulez

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

Answer 3

Vous n'avez pas besoin d'utiliser find. closest takes a context argument. cela vous aide à affiner le champ de recherche. Vous devriez l'utiliser.

Answer 4

Je n'utiliserais pas .find(). Je suppose qu'il sera probablement un peu plus efficace de traverser jusqu'au <td> le plus proche et d'obtenir le <td> frère avec la classe .cost_of_items en utilisant jQuery's .siblings() method.

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

---

EDIT: Pour clarifier les choses, voici le balisage 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>