jQuery使用append方法問題從select選項中切換div

Question

我有div <\\ select>下拉。 如果我選擇限制它從下拉菜單打開一個div與輸入，它工作正常。

我還添加了一個鏈接+ Add New並點擊+ add new創建一個帶有<\\ select>下拉列表的新 div，它應該像以前一樣工作但是當我從新下拉菜單中選擇限制時它會影響前一個。 我怎樣才能使它只為我正在工作的div開放而且對其他div沒有影響我沒有創建多少米。

JS FIDDLE

HTML

<div class="wrapper">
 <div class="row">   
    <select class="optionSelector">
        <option>-Select-</option>
        <option value="limited">Limited</option>
        <option>Unlimited</option>
     </select>

    <div class="limited" > 
        <input type="number">
     </div>
  </div>      
</div>

jQuery的

$('.add').click(function() {
 $(".wrapper").append('<div class="row"><select class="optionSelector"><option>-Select-</option><option value="limited">Limited</option><option>Unlimited</option></select><div class="limited" ><input type="number"></div></div>');
});

$(".wrapper").on('change', '.optionSelector', function(){
       $('.limited').hide();
       $('.' + $(this).val()).show();     
});

Answer 1

嘗試：

$(".wrapper").on('change', '.optionSelector', function(){
    $(this).closest('.row').find('.limited').css('display', $(this).val()=='limited'?'block':'none');
});

jsFiddle例子

Answer 2

你可以使用.siblings（）來獲取它旁邊的下拉列表

演示

$(".wrapper").on('change', '.optionSelector', function () {
    $(this).siblings('.limited').hide();
    $(this).siblings('.' + $(this).val()).show();
});

Answer 3

$('.limited')選擇器獲取class .limited所有元素。