Wie verwende ich ein anderes Bild für jeden JQuery UI Slider Griff

Question

Ich bin mit einem JQuery UI Schieber, der zwei Griffe hat (a.k.a Bereich Schieber). Ich weiß, wie href="https://stackoverflow.com/questions/1207307/how-to-change-jquery-ui-slider-handle"> Stil den ersten Griff

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

Aber wie Stil, den ich den zweiten Griff anders?

Firebug kann ich JQuery sehen nicht eindeutig jeden Griff identifizieren:

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

So stelle ich, dass ich entweder ein CSS-Kind-Selektor verwenden, die Cross-Browser problematisch sein könnte. Oder ich könnte einige JQuery Tricks verwenden, um eine CSS-Klasse auf den zweiten Griff hinzufügen? Wer dies in einer ordentlichen Weise geschehen vor?

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