jquery 자동 완성에서 첫 번째 목록 항목을 어떻게 스타일링합니까?

Question

jquery-ui 자동 완성을 사용하여 목록을 생성 중입니다. 이 목록에 사용자 정의 클래스를 적용하여 my_list : first-child와 같은 CSS 선택기를 사용하여이 목록의 첫 번째 항목을 참조 할 수 있습니다.

다음 코드를 시도했지만 li 태그의 클래스 지정자가 손실되었습니다. 어떤 제안? 여기에 비슷한 질문은 renderItem에 원숭이 패치로 오버로드하는 것에 대해 이야기하지만, 과도한 것처럼 보이는 클래스 속성을 지정하는 것만 큼 좋겠다. 당신이 깊은 모습 of the output을 경우

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

Answer 1

, 당신은 같은 것을 얻을 것이다 :

:

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

트릭을 할 것 등을위한

<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> 

을, 스타일처럼

질문에 뭔가가 누락 되었습니까?