将宽度应用于某个类的所有标记

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解决方案持开放态度。

修改

基本上我试图转向：

进入：

以下是视图中的代码：

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

当页面在浏览器中呈现时，以下是视图源对该控件的作用：

<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");
});