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>