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 =＆＃34; questionWrapper＆＃34;是动态的，可以是任意数量的..所以我可以说我有10个和我在第7个内。我想要的是选择前6个下拉菜单。我有一个事件可以从您选择的下拉菜单中获取下拉列表的文本。

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

我知道prev（），prevAll（）方法，但这些方法适用于同一父级的兄弟姐妹。我不认为有任何方法可以将这些下拉列表视为兄弟姐妹，或者我错了。？基本上需要选择之前的6个下拉列表，如果我当前正在选择第7个..还有其他任何想法。？

Answer 1

我不认为有任何方法可以将这些下拉列表视为兄弟姐妹，或者我错了。？

您需要考虑anchestor questionWrapper 兄弟姐妹，因为他们每个人都有 ddlControlType 作为孩子。相反， parent（）会返回 parent（），而且所有这些都不是兄弟。

因此，您需要获取.closest('.questionWrapper')以及之前的所有项目：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery选择以前不是兄弟姐妹的元素

1 个答案: