javascript - 如何使用按钮遍历 <ul> ？

Question

我正在为网站创建一种位于屏幕右侧的帮助栏。

我有一个由类突出显示的索引；如何循环使用这个“下一步”按钮并突出显示每个步骤？

fiddle :https://jsfiddle.net/1wvd690h/

HTML:

<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>

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());
});

Answer 1

怎么样

$("#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");
  });
});

FIDDLE

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight")
      .removeClass("highlight")
      .next()
      .index();
    if(idx==-1) idx=0;
    $list.eq(idx).addClass("highlight");
    console.log(idx);  
  });
});

.highlight {
	background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>