使用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链接时，输入字段将出现(在第1列和第2列中)，文本将消失，允许用户从表本身进行编辑。问题是，我的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();
});

Answer 2

您可以尝试这样做：

  $(this).closest('tr.table-row').find('.input-item').show();

Answer 3

您可以考虑:has选择器(我在演示时使用了切换而不是仅显示)：

​

$(function () {
  $('.edit-button').click(function (event) {
    $(this).parent().siblings(':has(".input-item")').toggle();
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<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>

​