2016-08-03 23 views
2

私は多くの項目を持つ表を持っています。ユーザーが編集ボタンをクリックしたときに入力フィールドを表示しようとしていますが、編集ボタンと同じ行にある要素だけを選択する方法はわかりません。私が起こるつもり何jQueryで要素を1つだけ選択する

<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内でのみ入力を選択するために使用していますか?

答えて

4

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

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

あなたはこれを試すことができます。

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

を同じことを書こうとしていましたが、テキストを隠すといいでしょう(言及混乱を避けるために、完全なコード(.click関数(){...}を含む)を書いてください。ありがとう。 –

+0

['.parent()'](https://api.jquery.com/parent/)は直接の親に行き渡るので動作しません – Satpal

+0

'parent'はセレクタなしで動作しますが、ここからは探していません直系親の場合は、それを「parents」に変更する必要があります –

0

あなたは: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>

関連する問題