javascript - 将宽度应用于某个类的所有标签

Question

我是 JavaScript 和 jquery 的新手。我有一些 Kendo DropDownList，我需要将列表本身设置为自动扩展到最长元素的宽度。我已经能够通过以下代码对每个控件执行此操作:

var dropdownlist = $("#Offeror").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#Offeror").parent().width());
dropdownlist.list.width("auto");

dropdownlist = $("#ReqCertlevel").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#ReqCertlevel").parent().width()-6);
dropdownlist.list.width("auto");

上面的代码有效，但我必须通过每个 ID 进行设置。我有几个下拉框。所以，我宁愿用 DD_List 类设置所有标签的宽度。我尝试了以下方法:

$( ".DD_List" ).each(function( index, object ) {
    var dropdownlist = object.data("kendoDropDownList");
    dropdownlist.list.css("min-width", object.parent().width());
    dropdownlist.list.width("auto");
});

它不起作用。我究竟做错了什么？我也对 CSS 解决方案持开放态度。

编辑:

基本上我想转:

进入:

这是 View 中的代码:

<div class="form-group">
    @Html.LabelFor(model => model.Offeror, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @(
            Html.Kendo().DropDownList()
                .HtmlAttributes(new { @style = "width: 125px;", @class = "DD_List" })
                .Name("Offeror")
                .SelectedIndex((int)Model.Offeror)
                .BindTo(Enum.GetNames(typeof(EnumQuoteOfferor)).ToList())
        )
        @Html.ValidationMessageFor(model => model.Offeror, "", new { @class = "text-danger" })
    </div>
</div>

当页面在浏览器中呈现时，以下是该控件的 View 源代码:

<div class="form-group">
    <label class="control-label col-md-2" for="Offeror">Offeror</label>
    <div class="col-md-10">
        <input class="DD_List" data-val="true" data-val-required="The Offeror field is required." id="Offeror" name="Offeror" style="width: 125px;" type="text" />
        <script>
            jQuery(function () { jQuery("#Offeror").kendoDropDownList({ "dataSource": ["AmptechInc", "AmptechEnergySystemsInc", "AmptechTechnicalServicesInc"], "index": 0 }); });
        </script>
        <span class="field-validation-valid text-danger" data-valmsg-for="Offeror" data-valmsg-replace="true"></span>
    </div>
</div>

Answer 1

错误的行是:

var dropdownlist = object.data("kendoDropDownList");
dropdownlist.list.css("min-width", object.parent().width());

这是因为 jQuery#each有两个参数，第二个是 dom 元素而不是 jQuery 元素。

所以，改为:

$( ".DD_List" ).each(function( index, ele) {
    var dropdownlist = $(ele).data("kendoDropDownList");
    dropdownlist.list.css("min-width", $(ele).parent().width());
    dropdownlist.list.width("auto");
});