jQuery獲取最接近輸入字段的值

Question

我有這樣的 HTML 代碼：

<tr>
  <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td>
  <td class='comm'><input class='narrow' value='' size='5'/></td>
</tr>

這段代碼會由一個 JS 函數自動生成，所以它發生的頻率更高。 要從第一個輸入中獲取值，我使用此函數：

jQuery('#tbl_order .qty input').bind('change', function() {

在這個函數中，我想獲得下一個輸入值。 我試過這個什么不起作用

jQuery(this).closest(".comm input").val()

Answer 1

.closest()

對於集合中的每個元素，通過測試元素本身並在 DOM 樹中向上遍歷其祖先來獲取與選擇器匹配的第一個元素。

您可以在最近的tr元素上使用find() 。 我也更喜歡分別使用on()和input事件而不是bind()和change 。

演示：

 jQuery('#tbl_order .qty input').on('input', function() { var nextVal = jQuery(this).closest("tr").find(".comm input").val(); console.log(nextVal); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr id="tbl_order"> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> <td class='comm'><input class='narrow' value='1234' size='5'/></td> </tr> </table>

Answer 2

您可以將next()與closest()結合使用

 $('#tbl_order .qty input').bind('change', function() { var $currentTd = $(this).closest("td"); var $nextTd = $currentTd.next(); var value = $nextTd.find("input").val(); console.log(value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl_order"> <tr> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> <td class='comm'><input class='narrow' value='' size='5'/></td> </tr> </table>

Answer 3

 $('.fa fa-trash').on('click', function () { 
 $tr = $(this).closest('tr');
    var data = $tr.children('td').map(function () {
      return $(this).text();
    }).get();
    console.log(data);


<table id="tbl_order">
<tr>
<td><input class='narrow' value='1' /><i class='fa fa-trash' aria- 
hidden='true'></i></td>
<td><input class='narrow' value='' size='5'/></td>
</tr>
</table>

這可能會讓您對映射函數有所了解。 在這里，我將 jquery onclick 類提供給 fa fa-trash。 所以每當事件被觸發時，特定的行就會被選中。 （我希望在表格中您從后端代碼獲取數據）