javascript - 使用 jQuery 查找父元素和最近的元素

Question

我有一个简单的表格作为

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

我们可以有多个行，与上面相同。

我需要的是当用户输入 qty 或 price 行 total 需要更新。

我尝试过的

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

价格是未定义

或者有更简单的方法吗？请查看 Fiddle

更新:

.parent(..) 选择当前元素集中每个元素的直接父级。第一个参数过滤这个集合。输入元素的直接父元素是 td 元素，而不是 tr 元素。

已更新 Fiddle

Answer 1

首先，考虑这样制作您的 html:

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

还有。就 JavaScript 而言:

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("");
      }
});

编辑:更好的方法，适当考虑空字段