selectの変更時に、次のdivとhideを見つけよう

Question

select_typeに変更が生じたとき、次の.div_conditionを非表示にしたいと思います。 div（a_condition）はページに動的に挿入されるため、多くのものが存在する可能性があるため、コンテナ内の次の.div_condition（a_condition）を見つける必要があります。

HTML ...

<div class="a_condition">         
    <div class="form-group"> 
     <span class="badge i_condition">1</span> 
     <label class="col-sm-4 control-label" >If</label> 
     <div class="col-sm-6"> 
      <select class="form-control select_type"> 
       <option value="0">Select...</option> 
       <option value="intent|.topScoringIntent.intent=product">intent=product</option> 
      </select> 
     </div> 
    </div> 

    <div class="form-group div_condition"> 
     <label class="col-sm-4 control-label" >Condition</label> 
     <div class="col-sm-6"> 
      <select class="form-control select_condition"> 
       <option value="0">Select...</option> 
       <option value="Is">Is</option> 
       <option value="Is Not">Is Not</option> 
       <option value="Contains">Contains</option> 
       <option value="Begins With">Begins With</option> 
       <option value="Ends With">Ends With</option> 
      </select> 
     </div> 
    </div> 
</div> 

そして、私はこれを試してみました。しかし、ちょうどあなたがdiv.a_conditionによって<select> Sの各ペアをバウンディングしている場合は、次のように動作するはず

$(document).on('change', ".select_type", function (e) { 
    //hide or show based on selected type 
    var arr = this.value.split("|"); 
    switch (arr[0]) { 
     case "intent": 
      var $elem = $(this).nextAll(".div_condition").hide(); 
      console.log($elem) 
       //.closest(".div_condition").hide(); 
      break; 
    } 
}); 

Answer 1

...それを隠す/見つけることができないよう：

$(document).on('change', ".select_type", function (e) { 
    //hide or show based on selected type 
    var arr = this.value.split("|"); 
    switch (arr[0]) { 
     case "intent": 
      $(this).parents('.a_condition').find('.div_condition').hide(); 
      break; 
    } 
}); 

はここJSFiddle

です