兄弟でない前の要素を選択するためのJQuery

Question

私は以下のようなDOMを持っています。

<div id="sortableWrapper"> 
    <div class="questionWrapper"> 
     <fieldset class="scheduler-border"> 
      <div class="form-group"> 
        <select class="ddlControlType"> 
        <option>opt 1</option> 
        <option>opt 2</option> 
        </select> 
      </div> 
     </fieldset> 
    </div> 
    <div class="questionWrapper"> 
     <fieldset class="scheduler-border"> 
      <div class="form-group"> 
        <select class="ddlControlType"> 
        <option>opt 1</option> 
        <option>opt 2</option> 
        </select> 
      </div> 
     </fieldset> 
    </div> 
    <div class="questionWrapper"> 
     <fieldset class="scheduler-border"> 
      <div class="form-group"> 
        <select class="ddlControlType"> 
        <option>opt 1</option> 
        <option>opt 2</option> 
        </select> 
      </div> 
     </fieldset> 
    </div>  
</div> 

クラス=「questionWrapper」とdiv要素は動的であり、それらの任意の番号を指定できます。..だから私は第七1の内部でそれらの10とイムを持っていることを言うことができます。私が欲しいのは、前の6つのドロップダウンを選択することです。私はあなたが選んだ誰かからのドロップダウンのテキストをつかむイベントを持っています。

$(".ddlControlType").on("change", function() { 
    var b = $(this).parent().find(".ddlControlType option:selected").text() 
}); 

私は前の（）、prevAll（）メソッドを認識してんだけど、それらは、同じ親の兄弟のためのものです。私は、これらのドロップダウンを兄弟として関連付ける方法がないと思いますか、私は間違っていますか？基本的に、現在7番目のものを選択している場合は、前の6つのドロップダウンを選択する必要があります。他のアイデア。

Answer 1

これらのドロップダウンを兄弟として関連付ける方法はないと思いますが、ここで間違っていますか？

あなたはそれらのそれぞれが子としてddlControlTypeとして持っているので、anchestorにquestionWrapper兄弟を検討する必要があります。代わりに、parent（）はparent（）を返します。これらはすべて兄弟ではありません。したがって

、あなたは.closest('.questionWrapper')ので、以前のすべてのアイテムを取得する必要があります。

$(this).closest('.questionWrapper').prevAll('.questionWrapper').find(".ddlControlType").val($(this).val()) 

$(".ddlControlType").on("change", function() { 
 
    $(this).closest('.questionWrapper').prevAll('.questionWrapper').find(".ddlControlType").val($(this).val()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="sortableWrapper"> 
 
    <div class="questionWrapper"> 
 
     <fieldset class="scheduler-border"> 
 
      <div class="form-group"> 
 
       <select class="ddlControlType"> 
 
        <option>opt 1</option> 
 
        <option>opt 2</option> 
 
       </select> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
    <div class="questionWrapper"> 
 
     <fieldset class="scheduler-border"> 
 
      <div class="form-group"> 
 
       <select class="ddlControlType"> 
 
        <option>opt 1</option> 
 
        <option>opt 2</option> 
 
       </select> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
    <div class="questionWrapper"> 
 
     <fieldset class="scheduler-border"> 
 
      <div class="form-group"> 
 
       <select class="ddlControlType"> 
 
        <option>opt 1</option> 
 
        <option>opt 2</option> 
 
       </select> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
</div>