只用jQuery选择一个元素

我有一个包含多个项目的表格。我试图在用户点击编辑按钮时显示输入字段，但我不知道如何只选择与编辑按钮相同的行中的元素。这里的表结构：只用jQuery选择一个元素

<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内的投入？

来源

2016-08-03 wiredfordesign

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

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

来源

2016-08-03 13:00:18 Satpal

你可以试试这个：

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

来源

2016-08-03 13:00:48

我准备写同样的东西，如果你也隐藏了文本，那就太好了（就像提到的那样编写完整的代码（包括.click函数（）{...}以避免混淆。谢谢。 –

['.parent（）']（https://api.jquery.com/parent/）将无法正常运行，因为它会穿过直接父母 – Satpal

“父母”在没有选择器的情况下工作，但由于此处我们没有看对于直系亲属，您应该将其更改为“父母” –

您可以考虑: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>

来源

2016-08-03 13:06:27 gaetanoM

只用jQuery选择一个元素

回答

相关问题