只用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選擇一個元素

回答

相關問題