我使用
this jQuery UI combobox autocomplete control开箱的jQuery UI网站:
我的问题是,我有一个页面上的多个组合框,我希望他们有不同的宽度为每一个。
我可以通过添加这个CSS更改所有的宽度:
.ui-autocomplete-input
{
width: 300px;
}
但我不能找出一种方法来改变其中一个的宽度。
解决方法
一个简单的
$('.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;}})
等等…
我会更新,如果你有一个想法,如何你想找到你的组合框。
编辑评论
oo,这使它更容易。从您链接到的示例源中,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”的输入。