Utilizzando un nome di classe in di jQuery .closest()

Question

sto cercando di fare alcuni calcoli per un "totale parziale", questo è il mio codice:

$('.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 è un input, è il .price prezzo del prodotto, .cost_of_items è dove voglio aggiornare il costo totale dell'articolo, es. item1 = £ 5 x 3 quantità = £ 15 totali per articolo1 calcTotal() è una funzione che aggiorna solo un costo totale per l'ordine. Il problema è mantenere tutti i calcoli in una riga della tabella, cioè sto facendo il calcolo nel codice sopra e non si attacca alla sua riga, il suo aggiornamento di tutti i campi con classe .cost_of_items ecc ...

il problema di mostrare il mio html è che il suo aggiunto dinamicamente da .appends jQuery(), ma qui è la rilevante 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:

soluzione di lavoro:

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

È bisogno di trovare il .cost_of_items nella <tr> contenente this:

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

Answer 2

Il più vicino troverà l'antenato più vicino (genitore, nonno), ma sarà necessario effettuare una ricerca per trovare l'elemento corretto da aggiornare. Ad esempio, se si dispone di un elemento in una riga di tabella ed è necessario un altro elemento nella stessa riga:

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

Edit:

Nel tuo caso, si vuole

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

Answer 3

Non è necessario utilizzare find. closest takes a context argument. che ti aiuta a restringere il campo di ricerca. Dovresti usarlo.

Answer 4

Non vorrei utilizzare .find(). Immagino che probabilmente sarà un po 'più efficiente attraversare fino al più vicino <td> e ottenere il fratello <td> con la classe .cost_of_items utilizzando jQuery's .siblings() method.

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

---

EDIT: Per chiarire, ecco il markup dal .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>