Javascript 如何迭代<；ul>；使用按钮？

我正在为一个网站在屏幕右侧创建一种帮助栏

我有一个类突出显示的索引；如何使用此“下一步”按钮迭代并突出显示每个步骤

小提琴：

HTML:

下一步

点击在线采购订单
选择“总计”文件夹
在筛选框中键入供应商的名称
单击采购订单编号，打开包含所需项目的采购订单
查看采购订单内容
如果此采购订单包含您需要的项目，请单击“复制”图标
Clicky'复制&；提示中的“新建”
根据需要更改数量
检查，准备好后提交订单

jQuery：

$("#next-help").click(function (){
    //should go to next index in <ul>
});

var listItems = $("#helpBar-list li");

listItems.each(function (index)
{
    //this is how i am looping through entire list, but i don't need to do that
    console.log(index + ": " + $(this).text());
});

$（“#下一个帮助”）。单击（函数（）{
//应转到
中的下一个索引
});
var listItems=$（“#帮助栏列表li”）；
listItems.each（函数（索引）
{
//这就是我循环浏览整个列表的方式，但我不需要这样做
log（index+”：“+$（this.text（））；
});

怎么样

$("#next-help").on("click",function (){
  $(".highlight").removeClass("highlight").next().addClass("highlight");
});

循环并保存索引以供存储

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight").removeClass("highlight").next().index();
    if(idx==-1) idx=0; // here you can do what you want with idx
    $list.eq(idx).addClass("highlight");
  });
});

$（函数（）{
var$list=$（“#帮助栏列表li”）；
$（“#下一个帮助”）。在（“单击”上，函数（）{
变量idx=$（“.highlight”）
.removeClass（“突出显示”）
.next（）
.index（）；
如果（idx==-1）idx=0；
$list.eq（idx）.addClass（“突出显示”）；
console.log（idx）；
});
});
。突出显示{
背景颜色：黄色；
}

下一个

点击在线采购订单
选择“总计”文件夹
在筛选框中键入供应商的名称
单击采购订单编号，打开包含所需项目的采购订单
查看采购订单内容
如果此采购订单包含您需要的项目，请单击“复制”图标
Clicky'复制&；提示中的“新建”
根据需要更改数量
检查，准备好后提交订单
使用addClass、removeClass和next（）


$（“#下一个帮助”）。单击（函数（）{
$（“#帮助栏列表”）
.find（“.highlight”）.removeClass（“highlight”）
.next（“li”）.addClass（“突出显示”）；
});
。突出显示{
背景颜色：黄色；
}

下一个

点击在线采购订单
选择“总计”文件夹
在筛选框中键入供应商的名称
单击采购订单编号，打开包含所需项目的采购订单
查看采购订单内容
如果此采购订单包含您需要的项目，请单击“复制”图标
Clicky'复制&；提示中的“新建”
根据需要更改数量
检查，准备好后提交订单
我认为您最好的选择是创建带有id的
，这样您就可以对它们进行迭代，否则您的javascript将始终返回所有li或第一个li（或者您也可以得到第一个没有突出显示的类，但这仍然不能满足您的需要）

如果您给它们id，您将找到用其类高亮显示的元素，并读取其id，然后删除高亮显示的类。将+1设置为其id（查找相关元素），并将highlight类设置为该元素。
还有一个解决方案：


var listItems=$（“#帮助栏列表li”）；
var i=listItems.filter（'.highlight'）.index（）；
$（“#下一个帮助”）。单击（函数（）{
listItems.removeClass（'highlight'）.eq（+i%listItems.length）.addClass（'highlight'）；
});
。突出显示{
背景：黄色；
}

下一个

点击在线采购订单
选择“总计”文件夹
在筛选框中键入供应商的名称
单击采购订单编号，打开包含所需项目的采购订单
查看采购订单内容
如果此采购订单包含您需要的项目，请单击“复制”图标
Clicky'复制&；提示中的“新建”
根据需要更改数量
给你，就这么简单。当它到达终点时，它还会循环回到起点：

var listItemCount = $('#helpBar-list li').length; // counts # of <li>
var current = 0; // current <li> index you are on

$('#next-help').on('click', function() {
    // Remove the highlight on the <li> and place it on the next one
    $('#helpBar-list li.highlight').removeClass('highlight').next().addClass('highlight');
    current++;

    // Once it reaches the end, loop back
    if(current == listItemCount) {
        $('#helpBar-list li:first-child').addClass('highlight');
        current = 0;        
    }
});

var listItemCount=$（'helpBar list li'）。长度；//

var电流=0；//当前
您所在的索引
$（“#下一个帮助”）。在（'click'，function（）上{
//移除
上的突出显示，并将其放置在下一个突出显示上
$（'#帮助栏列表li.highlight'）.removeClass（'highlight'）.next（）.addClass（'highlight'）；
电流++；
//一旦到达终点，循环返回
如果（当前==listItemCount）{
$（“#帮助栏列表li:first child”）.addClass（'highlight'）；
电流=0；
}
});

这是小提琴：
很好，我不知道“下一个”的存在！如果我没有弄错的话，你必须从最后一个到第一个。嗯，到底什么是杀伤力过大、更简单和更有效的代码？1）使用过滤器2）使用余数-我认为我的if对于任何级别的程序员来说都更容易掌握。我看到你留了一条线，但仍然是。可以认为它更优雅，但更难阅读，但我不知道哪个性能更好
next
或
eq
。需要运行性能，也许你是对的。筛选器不是问题，它只执行一次以获取所选索引。@mplungjan和我会说，您的版本存在性能问题，因为缓存选择器可能是个好主意。我认为在这种特殊情况下，这并不重要。你的意思是
var$hl=$（“.highlight”）
？-无法缓存-它将强制用户在最后单击两次。晚安，谢谢。。我之所以使用这个答案，是因为我还需要使用您指定的“当前”索引，以便选项
var listItemCount = $('#helpBar-list li').length; // counts # of <li>
var current = 0; // current <li> index you are on

$('#next-help').on('click', function() {
    // Remove the highlight on the <li> and place it on the next one
    $('#helpBar-list li.highlight').removeClass('highlight').next().addClass('highlight');
    current++;

    // Once it reaches the end, loop back
    if(current == listItemCount) {
        $('#helpBar-list li:first-child').addClass('highlight');
        current = 0;        
    }
});