Question

我有一张包含许多物品的桌子。我正在尝试在用户单击编辑按钮时显示输入字段，但我不知道如何仅选择与编辑按钮相同的行中的元素。这是表结构：

format

我打算发生的事情是，当用户点击特定行中的<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>链接时，输入字段将出现（在第1列和第2列中），文本将消失，从而允许用户从表格本身进行编辑。问题是，我拥有的jQuery代码（显然）选择了所有Edit类，从而显示了所有行的所有输入。

.input-item

如何使用jQuery仅选择点击的$('.edit-button').click(function(event){ $('.input-item').show(); });链接的.table-row内的输入？

Answer 1

您需要在当前元素上下文.table-row中使用.closest()方法遍历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选择器（我用来切换而不是仅用于演示）：

＆＃13;

scrollHeight

＆＃13;

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

＆＃13;

用jQuery只选择一个元素

3 个答案: