Jquery 循环浏览列表，给下面的第二个项目分类

我有一个包含3个项目的列表，当单击向上或向下按钮时，索引/活动项目会发生变化。我希望索引后的第一个后面应该有一个类“drain”，而索引后的第二个后面应该有一个类“unfill”。所以当点击它的时候，它看起来是这样的

当索引为1时：

 <a href="#" class="active"> Item One </a>
 <a href="#" class="drain"> Item Two </a>
 <a href="#" class="unfill"> Item Three </a>

当索引为2时：

<a href="#" class="unfill"> Item One </a>
<a href="#" class="active"> Item Two </a>
<a href="#" class="drain"> Item Three </a>

当索引为3时：

<a href="#" class="drain"> Item One </a>
<a href="#" class="unfill"> Item Two </a>
<a href="#" class="active"> Item Three </a>

我的数学不是很好，有人能帮我看看这个循环会是什么样子吗

var services = $('header.header-image .services-links a');
var totalServices = services.length;
var arrowUp = $('header.header-image .services .pagination .up');
var arrowDown = $('header.header-image .services .pagination .down');

arrowUp.click(function(event) {
 if (index > 1){
   index = index - 1;
 } else {
   index = totalServices;
 }
 updateActiveClass('up');
});

arrowDown.click(function(event) {
 if (index < totalServices){
   index = index + 1;
 } else {
  index = 1;
 }
 updateActiveClass('down');
});

services.click(function(event) {
 event.preventDefault();
 thisIndex = $(this).index();
 index =  thisIndex + 1;
 updateActiveClass();
});

var-services=$（'header.header-image.services-links-a'）；
var totalServices=services.length；
var arrowUp=$（'header.header-image.services.pagination.up'）；
var arrowDown=$（'header.header-image.services.pagination.down'）；
向上箭头。单击（功能（事件）{
如果（索引>1）{
指数=指数-1；
}否则{
指数=总服务；
}
updateActiveClass（'up'）；
});
向下箭头。单击（功能（事件）{
if（索引

设置“活动”类时，可以将所有其他类设置为“取消填充”，并在“活动”旁边加上“排水”。这不是最好的解决方案，但应该有效

$（函数（）{
//缓存元素
var ul=$（'ul'）；
变量列表=$（'ul>li'）；
$（'.up'）。在（'click'，function（）上{
var active=ul.find（'.active'）；
//删除所有类并设置为“取消填充”
lists.removeClass（）.addClass（'unfill'）；
//检查下一项以设置活动类
if（active.next（）.length）{
active=active.next（）.removeClass（'unfill'）.addClass（'active'）；
}否则{
active=lists.first（）.removeClass（'unfill'）.addClass（'active'）；
};
//检查下一项以设置有效排放等级
if（active.next（）.length）{
active.next（）.removeClass（'unfill'）.addClass（'drain'）；
}否则{
lists.first（）.removeClass（'unfill'）.addClass（'drain'）；
};
});
$（'.down'）。在（'click'，function（）上{
var active=ul.find（'.active'）；
//删除所有类并设置为“取消填充”
lists.removeClass（）.addClass（'unfill'）；
//检查下一项以设置活动类
如果（活动的.prev（）长度）{
active=active.prev（）.removeClass（'unfill'）.addClass（'active'）；
}否则{
active=lists.last（）.removeClass（'unfill'）.addClass（'active'）；
};
//检查下一项以设置有效排放等级
if（active.next（）.length）{
active.next（）.removeClass（'unfill'）.addClass（'drain'）；
}否则{
lists.first（）.removeClass（'unfill'）.addClass（'drain'）；
};
});
})

.active{color:green；}
.drain{颜色：红色；}
.unfill{颜色：灰色；}
.active:在{content:'active'；}之后
.drain:在{content:'drain'；}之后
.unfill:在{content:'unfill'；}之后

A
B
C
D

向上的
向下