針對div內部的jQuery

Question

我有一個表單，我希望在選擇選項時顯示輸入框。

問題：我允許用戶動態地添加更多的表單元素，所以ID的數量增加了，我不知道如何定位當前的表單輸入，而不是每一個。

作爲一個例子，一個用戶添加第二形式項之後我具有類似於這樣：

<div class="option-wrapper"> 
    <div id="condition-1" class="condition"> 
     <select id="option-1" class="option"> 
      <option value="0">Select...</option> 
      <option value="1">Option One</option> 
      <option value="2">Option Two</option> 
     </select> 
     <select id="operator-1" class="operator"> 
      <option value="0">Select...</option> 
      <option value="1">greater than</option> 
      <option value="2">less than</option> 
     </select> 
     <div id="input-1" class="form-input" style="display:none;"> 
      <input id="form-input-1" class="form-input"></input> 
     </div> 
    </div> 
</div> 

<div class="option-wrapper"> 
    <div id="condition-2" class="condition"> 
     <select id="option-1" class="option"> 
      <option value="0">Select...</option> 
      <option value="1">Option One</option> 
      <option value="2">Option Two</option> 
     </select> 
     <select id="operator-2" class="operator"> 
      <option value="0">Select...</option> 
      <option value="1">greater than</option> 
      <option value="2">less than</option> 
     </select> 
     <div id="input-2" class="form-input" style="display:none;"> 
      <input id="form-input-2" class="form-input"></input> 
     </div> 
    </div> 
</div> 

試圖目標＃輸入-2，以顯示它，通過使用形式輸入。只需要顯示其當前選項的方式包裝，包裝內的用戶當前工作

目前正在努力：

$('.operator').change(function() { 
switch (this.value) { 
    case '0': 
     break; 
    case '1': 
     $(this).parents('.form-input').toggle(); 
     break; 
} 
}); 

我知道這種用法的父母是錯誤的，我已經嘗試了很多變化，並沒有能夠達到我想要的。任何幫助表示讚賞，謝謝！

Answer 1

這是怎麼回事？

$('.operator').change(function() { 
    if (this.value === 1) 
      $('.form-input:last').toggle(); 
}); 

或者如果有你錯了，你可能會想這樣的：

$('.operator').change(function() { 
    if (this.value === 1) 
      $(this).parent().find('.form-input').toggle(); 
}); 

Answer 2

如何：

$(this).siblings(".form-input").toggle(); 

它得到與.form-input類的同級元素。