Jquery 到 select 之前不是兄弟的元素

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 和 class="questionWrapper" 是动态的，可以是任意数量。所以假设我有 10 个，我在第 7 个里面。我想要的是将前 6 个下拉列表 selected。我有一个事件将从您 select 所在的任何下拉菜单中获取下拉菜单的文本。

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

我知道 prev()、prevAll() 方法，但这些方法适用于相同 parent 的兄弟姐妹。我不认为有任何方法可以将这些下拉列表作为兄弟姐妹联系起来，或者我在这里错了。？基本上需要 select 前 6 个下拉菜单，如果我目前 select 在第 7 个下拉菜单。还有其他想法吗？

Answer 1

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

您需要考虑 anchestor questionWrapper 兄弟姐妹，因为他们每个人都有 ddlControlType 作为 child。相反，parent() returns 你 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>

Jquery 到 select 之前不是兄弟的元素

Jquery to select previous elements that arent siblings

jquery

jquery-selectors