Question

我正在尝试创建一个表，当用户单击更新时，它将获得第一个和第二个输入值。我试图使用prev来找到前两个DOM元素并获取值，但是失败了，我该怎么办？任何帮助表示赞赏。

＆＃13;

$('.update_button').on("click",function(){
	var update_val_1 = $(this).prev().find('input:first').val();
	var update_val_2 = $(this).prev().find('input:nth-child(2)').val();

	alert(update_val_1);
	alert(update_val_2);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
    <td><input type="text" value="apple" /></td>
    <td><input type="text" value="one" /></td>
    <td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
    <td><input type="text" value="banana" /></td>
    <td><input type="text" value="three" /></td>
    <td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
    <td><input type="text" value="berry" /></td>
    <td><input type="text" value="ten" /></td>
    <td><button type="button" class="update_button">UPDATE</button></td>
</tr>

＆＃13;

Answer 1

问题是prev查找兄弟节点。您的input元素位于不同的td中，因此它们不是兄弟姐妹。相反，您需要转到父行，然后从那里抓取input。

明确的例子：

$('.update_button').on("click", function() {
  var $parentRow = $(this).closest('.gridtable');
  var $firstCell = $parentRow.find('td:first-child');
  var $secondCell = $parentRow.find('td:nth-child(2)');
  var $firstInput = $firstCell.find('input');
  var $secondInput = $secondCell.find('input');
  var update_val_1 = $firstInput.val();
  var update_val_2 = $secondInput.val();

  console.log(update_val_1);
  console.log(update_val_2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="gridtable">
    <td>
      <input type="text" value="apple" />
    </td>
    <td>
      <input type="text" value="one" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="banana" />
    </td>
    <td>
      <input type="text" value="three" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="berry" />
    </td>
    <td>
      <input type="text" value="ten" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
</table>

简化示例：

$('.update_button').on("click", function() {
  var $parentRow = $(this).closest('.gridtable');
  var update_val_1 = $parentRow.find('td:first-child input').val();
  var update_val_2 = $parentRow.find('td:nth-child(2) input').val();

  console.log(update_val_1);
  console.log(update_val_2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="gridtable">
    <td>
      <input type="text" value="apple" />
    </td>
    <td>
      <input type="text" value="one" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="banana" />
    </td>
    <td>
      <input type="text" value="three" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="berry" />
    </td>
    <td>
      <input type="text" value="ten" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
</table>

Answer 2

我是 .closest（选择器）和 .find（'selector'）方法的忠实粉丝。

第一个上升到dom，直到找到给定选择器的第一个匹配。

第二个沿着dom走下去，发现所有的比赛。

.eq（index）类似于jQuery的数组[index]。它需要一组jQuery元素并返回给定索引处的元素。

$('.update_button').on("click",function(){
    var inputs = $(this).closest('.gridtable').find('input');
    var value1 = inputs.eq(0).val();
    var value2 = inputs.eq(1).val();
});

试图找到以前的DOM元素并获取输入值jquery

2 个答案: