的jQuery無法將數據追加到獨特的html元素

Question

我敢堅持了以下內容：

我從至極設置表中的行，我從每行選擇的數據值，並把他們送到.POST請求（通過點擊計算按鈕附加到每一行）。直到這裏 - 好吧，我收集每一行的不同數據。但是，當我嘗試將.post結果追加到行輸入字段時，我無法將其僅附加到行，它會附加到整個行集。任何想法爲什麼？

$('a.calculate').click(function(e) { 

    e.preventDefault(); 

    var a = $(this); 
    var start_date = a.parents('tr').find('input.first-date').val(); 
    var end_date = a.parents('tr').find('input.last-date').val(); 

    $.post("calculate.php", {start_date: ""+start_date+"", end_date: ""+end_date+""}, function(data){ 
      a.parents('tr').find('input.price').val(data); 
    }); 

}); 

Answer 1

不確定你的html，但我看到的一個可能的錯誤是使用.parents('tr')。

parents('tr')將返回是tr所以要根據你的HTML所有祖先（嵌套表）它可能會去行..和後續find('input.price')可能匹配多個元素之外。

嘗試使用.closest('tr')將停止它找到的第一個..

$('a.calculate').click(function(e) { 

    e.preventDefault(); 

    var a = $(this); 
    var start_date = a.closest('tr').find('input.first-date').val(); 
    var end_date = a.closest('tr').find('input.last-date').val(); 

    $.post("calculate.php", {start_date: ""+start_date+"", end_date: ""+end_date+""}, function(data){ 
      a.closest('tr').find('input.price').val(data); 
    }); 

}); 

Answer 2

請分享HTML也是如此。可能是格式錯誤。

小代碼清理：

$('a.calculate').click(function(e) { 

    e.preventDefault(); 

    var a = $(this), 
     tr = a.parents('tr').first(), 
     start_date = $('input.first-date', tr).val(), 
     end_date = $('input.last-date', tr).val(); 

    $.post("calculate.php", {start_date: ""+start_date+"", end_date: ""+end_date+""}, function(data){ 
      $('input.price', tr).val(data); 
    }); 

});