Css 如何为同一jquery控件的多个实例设置不同的样式？

我在同一个页面上有多个jquery组合框，我想以不同的方式设置每个组合框的宽度（和其他样式）。修改这些jquery类会更改所有这些类，但我想单独设置样式。怎么做

或
如果愿意，您可以查看下面的代码。


CSS：（这会改变所有这些内容）

HTML

无敏
50,000
75,000
没有Max
50,000
75,000
0+
1+
2+
0+
1+
1.5+

Javascript：（与combobox演示几乎相同）

$（文档）.ready（函数（）
{
$.widget（“ui.combobox”{
_创建：函数（）
{
var输入，
self=这个，
select=this.element.hide（），
selected=select.children（“：selected”），
value=selected.val（）？selected.text（）：“”，
包装器=此。包装器=$（“”）
.addClass（“ui组合框”）
.insertAfter（选择）；
输入=$（“”）
.appendTo（包装器）
.val（值）
.addClass（“ui状态默认ui组合框输入”）
.自动完成({
延迟：0，
最小长度：0，
自动对焦：对，
来源：功能（请求、响应）
{
var requestTermNoCommas=request.term.replace（/，/g，“”）；
//var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；//原始
var matcher=newregexp（“^”+$.ui.autocomplete.escapeRegex（requestTermNoCommas），“i”）；
响应（选择.children（“选项”）.map（函数（）
{
var text=$（this）.text（）；//原始
var textNoCommas=$（this.text（）.replace（/，/g，”）；
//if（this.value&（！request.term | | | matcher.test（text））//original
if（this.value&（！request.term | | matcher.test（textNoCommas）））
返回{
//标签：text.replace（//original
标签：textNoCommas.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“我”
)，“$1”）
//在每三位数后添加千逗号分隔符，并考虑可选的粗体html标记
。替换（/（）？（）？\d（）？（））（？=（）？（）？\d（）？（）？\d（）？（）？\d（）？（））+（！（）？\d（）？（））/g，“$1，”，
值：文本，
选项：这个
};
}));
},
选择：功能（事件、用户界面）
{
ui.item.option.selected=true；
自触发（“选定”，事件{
项目：ui.item.option
});
},
更改：功能（事件、用户界面）
{
如果（！ui.item）
{
var matcher=new RegExp（“^”+$.ui.autocomplete.escapeRegex（$（this.val（））+“$”，“i”），
有效=错误；
选择.children（“选项”）。每个（函数（）
{
if（$（this）.text（）.match（matcher））
{
this.selected=valid=true；
返回false；
}
});
//禁用此块，因为我们希望在combobox中保留自定义值（一致）
/*如果（！有效）
{
//删除无效值，因为它与任何内容都不匹配
$（此）.val（“”）；
选择.val（“”）；
输入数据（“自动完成”）。术语=”；
返回false；
}*/
}
}
})
.addClass（“ui小部件ui小部件内容ui左角”）
.focus（函数（）//用于选择焦点上的文本
{
//修复了chrome、firefox和safari中的一个bug（与仅使用$（this）.select（）相反）
$（this）.select（）.mouseup（函数（e）
{
e、 预防默认值（）；
$（此）。解除绑定（“鼠标悬停”）；
});
});
输入数据（“自动完成”）。\u renderItem=功能（ul，项目）
{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录(
.ui-combobox-input
{
    margin: 0; /*original value*/
    padding: 0.3em; /*original value*/
    width: 90px; /*change the default autocomplete textbox width (too wide)*/
}
/*this is for the dropdown box*/
.ui-autocomplete
{
    max-height: 400px; /*limits dropdown list height*/
    overflow-y: auto;   /* prevent horizontal scrollbar */ /*limits dropdown list height*/
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/
    z-index:1000 !important; /*limits dropdown list height*/
}

<div id="searchControlsBasic" runat="server" class="searchControlsBasic">
    <div id="minPrice">
        <select id="selMinPrice" class="selMinPrice" tabindex="3">
            <option value=“”>No Min</option>
            <option value=“50000”>50,000</option>
            <option value=“75000”>75,000</option>
        </select>
    </div>
   <div id="maxPrice">
        <select id="selMaxPrice" class="selMaxPrice" tabindex="4">
            <option value=“”>No Max</option>
            <option value=“50000”>50,000</option>
            <option value=“75000”>75,000</option>
        </select>
    </div>
   <div id="beds">
        <select id="selBeds" class="selBeds" tabindex="5">
            <option value=“0”>0+</option>
            <option value=“1”>1+</option>
            <option value=“2”>2+</option>
        </select>
    </div>
   <div id="baths">
        <select id="selBaths" class="selBaths" tabindex="6">
            <option value=“0”>0+</option>
            <option value=“1”>1+</option>
            <option value=“1.5”>1.5+</option>
        </select>
    </div>
</div>

$(document).ready(function()
{
    $.widget("ui.combobox", {
        _create: function ()
        {
            var input,
                    self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "",
                    wrapper = this.wrapper = $("<span>")
                        .addClass("ui-combobox")
                        .insertAfter(select);

            input = $("<input>")
                    .appendTo(wrapper)
                    .val(value)
                    .addClass("ui-state-default ui-combobox-input")
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        autoFocus: true,
                        source: function (request, response)
                        {
                            var requestTermNoCommas = request.term.replace(/,/g, "");
                            //var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original
                            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i");
                            response(select.children("option").map(function ()
                            {
                                var text = $(this).text(); //original
                                var textNoCommas = $(this).text().replace(/,/g, "");
                                //if (this.value && (!request.term || matcher.test(text))) //original
                                if (this.value && (!request.term || matcher.test(textNoCommas)))
                                    return {
                                        //label: text.replace( //original
                                        label: textNoCommas.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                                //$.ui.autocomplete.escapeRegex(request.term) + //original
                                                $.ui.autocomplete.escapeRegex(requestTermNoCommas) +
                                                ")(?![^<>]*>)(?![^&;]+;)", "i"
                                            ), "<strong>$1</strong>")
                                            // adds the thousands comma seperator after every third digit and takes into account the optional bold html markup
                                            .replace(/((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)(?=((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)+(?!(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?))/g, "$1,"),
                                        value: text,
                                        option: this
                                    };
                            }));
                        },
                        select: function (event, ui)
                        {
                            ui.item.option.selected = true;
                            self._trigger("selected", event, {
                                item: ui.item.option
                            });
                        },
                        change: function (event, ui)
                        {
                            if (!ui.item)
                            {
                                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                    valid = false;
                                select.children("option").each(function ()
                                {
                                    if ($(this).text().match(matcher))
                                    {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                // disabling this block since we want to leave custom values in combobox (that are conforming)
                                /*if (!valid)
                                {
                                    // remove invalid value, as it didn't match anything
                                    $(this).val("");
                                    select.val("");
                                    input.data("autocomplete").term = "";
                                    return false;
                                }*/
                            }
                        }
                    })
                    .addClass("ui-widget ui-widget-content ui-corner-left")
                    .focus(function() // for selecting text on focus 
                    {
                        // fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select())
                        $(this).select().mouseup(function (e)
                        {
                            e.preventDefault();
                            $(this).unbind("mouseup");
                        });
                    });

            input.data("autocomplete")._renderItem = function (ul, item)
            {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);
            };

            $("<a>")
                    .attr("tabIndex", -1)
                    .attr("title", "Show All Items")
                    .appendTo(wrapper)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass("ui-corner-all")
                    .addClass("ui-corner-right ui-combobox-toggle")
                    .click(function ()
                    {
                        // close if already visible
                        if (input.autocomplete("widget").is(":visible"))
                        {
                            input.autocomplete("close");
                            return;
                        }

                        // work around a bug (likely same cause as #5265)
                        $(this).blur();

                        // pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                        input.focus();
                    });
        },

        destroy: function ()
        {
            this.wrapper.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
});

$(document).ready(function()
{
    // setup min & max price, beds, and baths comboboxes
    $(".selMinPrice").combobox();
    $(".selMaxPrice").combobox();
    $(".selBeds").combobox();
    $(".selBaths").combobox();
    $("#toggle").click(function ()
    {
        $(".selMinPrice").toggle();
        $(".selMaxPrice").toggle();
        $(".selBeds").toggle();
        $(".selBaths").toggle();
    });
});

#minPrice .ui-combobox-input {
    width:400px;
}

#maxPrice .ui-combobox-input {
    width:300px;
}

#beds .ui-combobox-input {
    width:200px;
}

#baths .ui-combobox-input {
    width:100px;
}