Trova il genitore e l'elemento più vicino utilizzando jQuery

Question

Ho una forma semplice come

<tr> 
    <td> <input type="text" name="qty[]" placeholder="qty"/> </td> 
    <td> <input type="text" name="price[]" placeholder="price"/> </td> 
    <td> <input type="text" name="total[]" placeholder="Total"/> </td> 
</tr> 

possiamo avere fila multipla con lo stesso come sopra.

Ciò di cui ho bisogno è quando l'utente immette il qty o price la riga total deve essere aggiornata.

Quello che ho cercato

$('input[name=\'qty[]\']').on('change keyup', function(){ 
    var qty = $(this).val(); 
    var price = $(this).parent('tr').find('input[name=\'price[]\']').val(); 
}); 

price è undefined

O c'è un modo più semplice per farlo? Si prega di verificare l'UPDATE Fiddle

:

.parent(..) seleziona la controllante diretta di ciascuno degli elementi nella attuale serie di elementi. Il primo argomento filtra questo set. Il genitore diretto dell'elemento di input è l'elemento td, non l'elemento tr.

Aggiornato Fiddle

Answer 1

prima di, pensare di fare tuo html come tale:

<tr> 
    <td> <input type="number" name="qty[]" placeholder="qty"/> </td> 
    <td> <input type="number" name="price[]" placeholder="price"/> </td> 
    <td> <input type="number" name="total[]" placeholder="Total"/> </td> 
</tr> 

anche. Per quanto riguarda una javascript va:

jQuery(document).on("change , keyup" , "input[name='qty[]'] , input[name='price[]']" ,function(){ 
    var parent_element = jQuery(this).closest("tr"); 
    var qty = jQuery(parent_element).find("input[name='qty[]']").val(); 
    var price = jQuery(parent_element).find("input[name='price[]']").val(); 
    if(qty.trim() != "" && price.trim() != "") 
     { 
     jQuery(parent_element).find("input[name='total[]']").val(parseFloat(qty) *parseFloat(price)); 
     } 
     else 
     { 
     jQuery(parent_element).find("input[name='total[]']").val(""); 
     } 
}); 

EDIT: migliore approccio, tenendo opportunamente conto campi vuoti

Answer 2

.parent(..) seleziona controllante diretta di ciascuno degli elementi dell'insieme corrente di elementi. Il primo argomento filtri questo set. Il genitore diretto dell'elemento di input è l'elemento td, non l'elemento tr.

Poiché hai solo 1 elemento nel set, non filtrare affatto. Ottieni il genitore due volte, quindi selezioni l'elemento tr.

$('input[name=\'qty[]\']').on('change keyup', function(){ 
    var qty = $(this).val(); 
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val(); 
}); 

Answer 3

I "non sono sicuro se siete in grado di modificare il codice HTML, ma se si può Penso che sarà meglio per dare il vostro input sa class s come riportato di seguito:

<tr> 
    <td> <input class='calculate' type="number" name="qty[]" placeholder="qty"/> </td> 
    <td> <input class='calculate' type="number" name="price[]" placeholder="price"/> </td> 
    <td> <input class='total' type="number" name="total[]" placeholder="Total"/> </td> 
</tr> 

E utilizzare class selettori per ottenere i vostri valori:

$('.calculate']').on('change keyup', function(){ 
    var qty = parseFloat($(this).parents('tr').find('.qte').val()); 
    var price = parseFloat($(this).parents('tr').find('.price').val()); 

    $(this).parents('tr').find('.total').val(qty * price); 
}); 

Spero che questo aiuti.

Answer 4

Basta cambiare parent()-parents():

Demo:

https://jsfiddle.net/yqe4kwbz/9/

Citando dal https://api.jquery.com/parents/ sbout parents():

Ottenere gli antenati di ogni elemento del set corrente di elementi abbinati , facoltativamente filtrato da un selettore. I metodi .parents() e .parent() sono simili, tranne per il fatto che il secondo sposta solo un singolo livello nell'albero DOM.

Answer 5

$('input[name=\'qty[]\']').on('change keyup', function(){ 
    var qty = $(this).val(); 
    var price = $(this).closest("tr").find('input[name=\'price[]\']').val(); 
}); 

Anche se questo codice funziona, hai a che fare con un sacco di convalide.