Javascript 使用基于Id的循环设置类

我已经做了一个常规的图像滑块与一个菜单，幻灯片与它

如果滑块位于幻灯片#3上，菜单将如下所示：（这是带有幻灯片Id的菜单按钮）

当前幻灯片总是第一张，下一张是下一张幻灯片，第一张幻灯片在最后一张幻灯片之后

因此，如果幻灯片#4是最新的，菜单将如下所示：

4 5 1 2 3

<ul id="slider-menu-content">
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
</ul>

现在我想为每一个设置一个类。因此，第一个顺序有一个类，如“position1”和下一个“position2”等

此函数在每次幻灯片更改时调用，并且变量currentSlide包含currentSlide id

function setMenuColors(currentSlide) {
    jQuery('#slider-menu'+currentSlide).removeClass().addClass('slider-menu-item position1');
}

在jquery为当前幻灯片设置类之后，某种循环应该为接下来的四张幻灯片设置类，但我不知道该怎么做

有人有什么想法吗

编辑：菜单的HTML如下所示：

4 5 1 2 3

<ul id="slider-menu-content">
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
</ul>

滑动菜单按钮1
滑动菜单按钮2
滑动菜单按钮3
滑动菜单按钮4
滑动菜单按钮5
滑动菜单按钮1
滑动菜单按钮2
滑动菜单按钮3
滑动菜单按钮4
滑动菜单按钮5

doublets由jQuery创建，因此菜单可以无缝循环。

---

元素的顺序不会改变。

想象你有一个如下的结构：

<div id="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

例如，见：

---

问题是我想向所有元素添加一个类。容器中元素的顺序不变。（因为它是移动的容器，而不是其中的元素。）我不明白这一点。如果容器中有一些set子元素，那么@nico给出的上述代码应该适合您。你能解释一下哪些部分不适合你吗？这些代码只会为第一张幻灯片添加类。我需要为每张幻灯片上一节课。容器中的第一个元素并不总是当前幻灯片。@Patrik：上面的代码将

滑块菜单项
类应用于每个幻灯片（参见JSFIDLE示例，它们有黄色背景），然后它将
first
样式应用于第一个子div。我不明白你说的第一个元素并不总是当前的。。。例如，您说如果选择了4，那么顺序是
451233
（因此4是第一个元素）。我错过了什么？