javascript - 使用 jQuery 只选择一个元素

Question

我有一张包含许多项目的表格。我试图在用户单击编辑按钮时显示输入字段，但我不知道如何仅选择与编辑按钮位于同一行内的元素。这是表结构:

<table>

    <tr class="table-row">
        <td>
          <a href="#" class="item-name">Item 1</a>
          <input type="text" value="[item]" class="input-item" id="item-1">
        </td>
        <td>
          <a href="#" class="item-name">Price 1</a>
          <input type="text" value="[item]" class="input-item" id="price-1">
        </td>
        <td><a href="#" class="edit-button">Edit</a></td>
    </tr>

    <tr class="table-row">
        <td>
          <a href="#" class="item-name">Item 2</a>
          <input type="text" value="[item]" class="input-item" id="item-2">
        </td>
        <td>
          <a href="#" class="item-name">Price 2</a>
          <input type="text" value="[item]" class="input-item" id="price-2">
        </td>
        <td><a href="#" class="edit-button">Edit</a></td>
    </tr>

    ...

</table>

我打算发生的事情是，当用户点击特定行中的 Edit 链接时，输入字段将出现(在第一列和第二列中)并且文本将消失，允许用户从表本身进行编辑。问题是，我的 jQuery 代码(显然)选择了所有 .input-item 类，从而显示所有行的所有输入。

$('.edit-button').click(function(event){
  $('.input-item').show();
});

如何使用 jQuery 仅选择单击的 Edit 链接的 .table-row 内的输入？

Answer 1

您需要使用 .closest() 遍历到 .table-row当前元素上下文中的方法，即 this，然后使用 .find()以后代 .input-item 元素为目标。

$('.edit-button').click(function(event){
  $(this).closest('.table-row').find('.input-item').show();
});