1

jquery-ui autocomplete を使用してリストを生成しています。my_list:first-child のような css セレクターを使用して、このリストの最初の項目を参照できるように、このリストにカスタム クラスを適用したいと考えています。

次のコードを試しましたが、li タグのクラス指定子が失われています。助言がありますか？ここでの同様の質問は、モンキー パッチで renderItem をオーバーロードすることについて話していますが、私がやりたいことは class 属性を指定することだけなので、これは過剰に思えます。

.data('autocomplete')._renderItem = ( ul, item ) ->
  $( "<li class='my_list'></li>" )
    .data( "item.autocomplete", item )
    .append( '<a>' + item.label + '</a>' )
    .appendTo( ul )
4

1 に答える 1

3

出力を詳しく調べると、次のような結果が得られます。

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; display: block; width: 108px; top: 275px; left: 576px; ">
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all ui-state-hover" tabindex="-1" id="ui-active-menuitem">ActionScript</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">AppleScript</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">Asp</a></li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">BASIC</a></li>
</ul>

そのような場合、次のようなスタイル:

.ui-autocomplete li:first-child { background-color: red; }

トリックを行います：

ここに画像の説明を入力

あなたの質問に何か欠けていますか？

于 2012-04-15T11:57:32.587 に答える