jQuery选择之前没有兄弟姐妹的元素

Question

I have DOM as below.

<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>

The div with class="questionWrapper" is dynamic and can be any number of them.. So lets say that i have 10 of them and im inside the 7th one. What i want is for the Previous 6 dropdowns to be selected. I have an event that will grab the text of the dropdown from anyone the dropdowns the you select from.

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

I'm aware of the prev(), prevAll() methods, but those are for siblings of the same parent. I dont think there is any way to relate these dropdowns as siblings, or am i wrong here.? Basically need to select the previous 6 dropdowns if im currently selecting on the 7th one.. Any other idea.?

Answer 1

I dont think there is any way to relate these dropdowns as siblings, or am i wrong here.?

You need to consider the anchestor questionWrapper siblings, because each of them has as ddlControlType as a child. Instead, parent() returns you a parent() and all these are not siblings.

Hence, you need to get the .closest('.questionWrapper') and so all the previous items:

$(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>