jquery - 是否可以设置 jQuery 自动完成组合框的宽度？

Question

我正在使用this jQuery UI combobox autocomplete control jQuery UI 网站开箱即用:

我的问题是，我在一个页面上有多个组合框，我希望每个组合框具有不同的宽度。

我可以通过添加此 CSS 来更改所有这些的宽度:

 .ui-autocomplete-input
 {
     width: 300px;
 }

但我无法找到一种方法来更改其中一个的宽度。

Answer 1

一个简单的

$('.ui-autocomplete-input').css('width','300px')

可以(我在链接页面上尝试使用 Firebug )更改页面上的第一个。

你可以这样做:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page

更改第 N 个。

要根据特征找到特定的特征，您可以通过多种方式进行。

通过第一个“选项”(在本例中为“asp”)找到它:

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

通过“标签”找到它:

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

等等...

如果您知道如何找到组合框，我会更新。

编辑评论

哦，这让事情变得更加容易。从您链接到的示例源中，HTML 已包装在 div 中:

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <option value="a">asp</option>
        <option value="c">c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">java</option>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
    </select>
</div>

然后我会给该 div 一个唯一的 id:

$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')

这会选择 div 的子元素，这些子元素是“ui-autocomplete-input”类的输入。