我使用
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”的输入。