jQuery切換從選擇選項的div與附加方法問題

Question

我有div < \ 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

可以使用.siblings()只得到下拉旁邊

demo

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

Answer 2

嘗試：

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

jsFiddle example

Answer 3

的$('.limited')選擇獲取所有與類.limited的元素。