Tìm phụ huynh và yếu tố gần bằng jQuery

Question

Tôi có một hình thức đơn giản như

<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> 

chúng ta có thể có nhiều hàng với tương tự như trên.

Điều tôi cần là khi Người dùng nhập qty hoặc price hàng total cần cập nhật.

Những gì tôi cố gắng

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

price là undefined

Hoặc là có một cách dễ dàng hơn để làm điều đó? Vui lòng kiểm tra Fiddle

UPDATE:

.parent(..) chọn phụ huynh trực tiếp của mỗi người trong số các yếu tố trong các thiết lập hiện của các yếu tố. Đối số đầu tiên lọc bộ này. Phụ huynh trực tiếp của phần tử đầu vào của bạn là phần tử td, không phải là phần tử tr.

Cập nhật Fiddle

Answer 1

đầu, suy nghĩ về việc html của bạn như vậy:

<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> 

Ngoài ra. Theo một javascript đi:

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: Better cách tiếp cận, đúng cách có tính đến các lĩnh vực có sản phẩm nào

Answer 2

.parent(..) chọn phụ huynh trực tiếp của mỗi người trong số các yếu tố trong các thiết lập hiện của các yếu tố. Đối số đầu tiên bộ lọc bộ này. Phụ huynh trực tiếp của phần tử đầu vào của bạn là phần tử td, không phải là phần tử tr.

Vì bạn chỉ có 1 phần tử trong bộ của mình, đừng lọc gì cả. Chỉ cần có được cha mẹ hai lần, vì vậy bạn chọn phần tử tr.

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

Answer 3

tôi "không chắc chắn nếu bạn có thể thay đổi trong mã HTML, nhưng nếu bạn tôi có thể nghĩ rằng nó sẽ được tốt hơn để cung cấp cho sa input bạn class giống như ví dụ sau:

<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> 

Và sử dụng class selectors để có được giá trị của bạn:

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

Hope this helps.

Answer 4

Chỉ cần thay đổi parent()-parents():

Demo:

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

Trích dẫn từ https://api.jquery.com/parents/ sbout parents():

Lấy tổ tiên của mỗi phần tử trong tập hợp hiện tại của các yếu tố phù hợp , tùy chọn được lọc bởi bộ chọn. Các phương thức .parents() và .parent() tương tự nhau, ngoại trừ việc phương thức thứ hai chỉ đi một cấp duy nhất lên cây DOM.

Answer 5

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

Mặc dù mã này hoạt động, bạn phải đối phó với rất nhiều vụ việc phê chuẩn.