针对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类的同级元素。