jQueryで要素を1つだけ選択する

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番目の列に）表示されることで、テキストになります。ここではテーブル構造ですユーザーがテーブル自体から編集できるようになります。問題は、私は（明らかに）すべての.input-itemクラスを選択し、すべての行からのすべての入力を表示するjQueryコードです。

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

は、どのように私はjQueryのクリックEditリンクの.table-row内でのみ入力を選択するために使用していますか？

Answer 1

あなたは子孫.input-item要素を標的とする.find()を使用し、その後、現在の要素のコンテキストすなわちthisに.closest()方法を用い.table-rowまで横断する必要があります。

$('.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>