Как мне использовать разные изображения для каждого дескриптора слайдера пользовательского интерфейса jQuery
Вопрос
Я использую слайдер пользовательского интерфейса jQuery, который имеет две ручки (он же диапазон слайдер).Я знаю, как это сделать придайте форму первой ручке:
.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-класс ко второму дескриптору?Кто-нибудь раньше делал это аккуратно?
Решение
$(window).load(function(){
handle = $('#slider A.ui-slider-handle');
handle.eq(0).addClass('first-handle');
handle.eq(1).addClass('second-handle');
});
Другие советы
css:
#hourlyRateSlider a:last-child {}
Не связан с StackOverflow