Welcome to WebmasterWorld Guest from 54.196.244.45

Forum Moderators: open

Message Too Old, No Replies

Add class to multiple same items

add class to jquery ui slider handles

     
8:18 pm on Mar 2, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


I'm using this bit of javascript to add a class to the left and right handles of the jQuery UI Slider

$(document).ready(function() {
handle = $('.slider A.ui-slider-handle');
handle.eq(0).addClass('left-handle');
handle.eq(1).addClass('right-handle');
});


it's working if I only have one slider on the page but it doesn't seem to want to add the class to multiple items that exist in the same div class. My HTML code is

<div class="slider">
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<div class="slider-range"></div>
</div>
<div class="slider">
<label for="amount2">Price range:</label>
<input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;"/>
<div class="slider-range2"></div>
</div>

Been trying to figure this out for a few hours now so I thought I'd ask to see if anyone can point me in the right direction. Thanks in advance.
8:54 pm on Mar 2, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Does this work?


$(document).ready(function() {
$('.slider A.ui-slider-handle').each(function(idx) {
$(this).addClass(idx % 2 == 0? 'left-handle': 'right-handle');
});
});
9:02 pm on Mar 2, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


Thank you so much - you've twice in the space of two days been fantastic at providing a solution to my problem. I really do appreciate this. Thanks Fotiman