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> 

與類的div =「questionWrapper」是動態的，可以是任何數量的人..因此，可以說，我對他們有10和IM第七屆一個內。我想要的是選擇Previous 6下拉菜單。我有一個活動會從任何你選擇的下拉菜單中抓取下拉菜單的文字。

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

我知道的上一個（），prevAll（）方法，但那些都是相同的父的兄弟姐妹。我不認爲有任何方法可以將這些下拉列表作爲兄弟姐妹，或者我在這裏犯了錯誤。基本上需要選擇以前的6個下拉菜單，如果我現在正在選擇第7個下拉菜單..任何其他想法。？

Answer 1

我不認爲有任何方法可以將這些下拉列表作爲兄弟姐妹，或者我在這裏是錯誤的。

你需要考慮anchestor questionWrapper兄弟姐妹，因爲他們每個人都有爲ddlControlType作爲一個孩子。相反，父母（）返回給您一個父母（）並且所有這些都不是兄弟姐妹。

因此，你需要得到.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>