web-dev-qa-db-fra.com

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

J'essaie de faire quelques calculs pour un "total cumulé", 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, .price est le prix du produit, .cost_of_items est l'endroit où je veux mettre à jour le coût total de l'article, c'est-à-dire. item1 = £ 5 x 3 quantité = £ 15 au total pour item1 calcTotal () est une fonction qui ne fait que mettre à jour le coût total de la commande. Le problème est de garder tous les calculs sur une ligne du tableau, c'est-à-dire que je fais le calcul dans le code ci-dessus et que ça ne colle pas à sa ligne, sa mise à jour de tous les champs avec la classe .cost_of_items etc ...

le problème avec l'affichage de mon html est qu'il est ajouté dynamiquement par jQuery .appends () mais voici le jQuery pertinent:

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

MODIFIER:

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

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

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

Le plus proche trouvera l'ancêtre le plus proche (parent, grand-parent), mais vous devrez ensuite effectuer une recherche afin de trouver l'élément correct à mettre à jour. Par exemple, si vous avez un élément dans une ligne du tableau et que vous avez besoin d'un autre élément dans cette même ligne:

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

Modifier:

Dans votre cas, vous voudrez

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

Je n'utiliserais pas .find(). Je suppose qu'il sera probablement un peu plus efficace de parcourir le <td> Le plus proche et d'obtenir le frère <td> Avec la classe .cost_of_items En utilisant jQuery's .siblings() méthode .

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

EDIT: Pour clarifier, 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>
3
user113716