Re: Loop/count to provide visual clues

[Rule13]

OK… I figured something out to achieve the functionality I’m after.
This will set the first span to active and then add/remove the active
class when the user cycles through using the previous and next
buttons. Since the carousel is a circular loop, I am then addressing
the case when the user is on the first item and hits the previous
button or on the last item and hits the next button. Here’s the code
I fudged together:

$(‘.item-list ul li’).each(function(i) {
$(‘.visual-cue p’).append("<span></span>");
});
$(‘.visual-cue p span:first’).addClass(‘active’);
$(‘#carousel-next’).click(function() {
if($(‘.visual-cue p span:last.active’).length > 0) {
$(‘.visual-cue p span:last’).removeClass(‘active’);
$(‘.visual-cue p span:first’).addClass(‘active’);
} else {
$(‘.visual-cue p span.active’).removeClass(‘active’).next().addClass
(‘active’);
}
});
$(‘#carousel-prev’).click(function() {
if($(‘.visual-cue p span:first.active’).length > 0) {
$(‘.visual-cue p span:first’).removeClass(‘active’);
$(‘.visual-cue p span:last’).addClass(‘active’);
} else {
$(‘.visual-cue p span.active’).removeClass(‘active’).prev().addClass
(‘active’);
}
});

Does anybody know how to clean this code up and/or streamline it better? Thanks
for any help/assistance you can provide.