如何使用不同的圖像每個JQuery用戶界面滑塊處理

Question

我使用它有兩個把手一個jQuery UI滑塊（a.k.a 範圍滑塊）。我知道如何style the first handle：

.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 

但我如何設計不同的第二個句柄？

用Firebug我可以看到jQuery的不唯一標識每個手柄：

<div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> 
<div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/> 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/> 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/> 
</div> 

所以我想我必須使用一個CSS子選擇這可能是跨瀏覽器的問題。或者，我可以使用一些JQuery的掛羊頭賣狗肉的CSS類添加到第二把手？在任何人面前一個整潔的方式做到了這一點？

Answer 1

$(window).load(function(){ 
    handle = $('#slider A.ui-slider-handle');   
    handle.eq(0).addClass('first-handle');   
    handle.eq(1).addClass('second-handle'); 
}); 

Answer 2

CSS：

#hourlyRateSlider a:last-child {}