javascript - 根据 Id 使用循环设置类

Question

我制作了一个常规图像 slider ，带有一个随其滑动的菜单。

如果 slider 位于第 3 张幻灯片上，菜单将如下所示:(这是带有幻灯片 ID 的菜单按钮)

3 4 5 1 2

当前幻灯片始终位于第一张幻灯片，下一张幻灯片位于下一张幻灯片，第一张幻灯片位于最后一张幻灯片之后。

因此，如果幻灯片 #4 是当前幻灯片，菜单将如下所示:

4 5 1 2 3

现在我想为每个设置一个类。因此，第一个按顺序有一个类似“position1”的类，然后是“position2”等。

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

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

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

有人有什么想法吗？

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

<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>

双线由 jQuery 创建，以便菜单可以无缝循环。元素的顺序不会改变。

Answer 1

想象一下您的结构如下:

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

你可以

$("#container").children("div").removeClass().addClass("slider-menu-item");
$("#container").children("div :first").addClass("first");

例如，参见: http://jsfiddle.net/VAMhu/