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

Question

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

我有一个类突出显示的索引; 如何迭代使用这个"下一步"按钮并突出显示每一步？

小提琴: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");
  });
});

小提琴

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