的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); 
    }); 

});