5

我正在使用一个有两个句柄（又名范围滑块）的 JQuery UI 滑块。我知道如何设计第一个手柄：

.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 类添加到第二个句柄？以前有人以简洁的方式做到这一点吗？

4

2 回答 2

12 
$(window).load(function(){
    handle = $('#slider A.ui-slider-handle');        
    handle.eq(0).addClass('first-handle');        
    handle.eq(1).addClass('second-handle');
});
于 2010-03-08T05:17:00.207 回答
0

CSS：

#hourlyRateSlider a:last-child {}
于 2012-12-22T06:40:14.490 回答