Geek Answers Handbook

How can I iterate through <ul> using a button?

I am creating a kind of help panel on the right side of the screen for a website.

sidebar help

I have an index allocated by a class; How to iterate with this “next” button and highlight each step?

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());
});
+4
source share
5 answers

What about

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

to loop and save the index for storage

$(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>
Run codeHide result
+5
source

Another solution:

var listItems = $("#helpBar-list li");
var i = listItems.filter('.highlight').index();

$("#next-help").click(function () {
    listItems.removeClass('highlight').eq(++i % listItems.length).addClass('highlight');
});
.highlight {
    background: 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>
</ul>
Run codeHide result
+2
source

, . , :

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

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

+2

addClass, removeClass next()

$("#next-help").click(function() {
  $("#helpBar-list")
    .find(".highlight").removeClass("highlight")
    .next("li").addClass("highlight");
});
.highlight {
    background-color: yellow;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
Hide result
+1

I think it’s best to create <li>with an identifier so that you can iterate over them, otherwise your javascript will always return either all or the very first (or you can also get the very first thing that DOESNT has a highlighted class, but it still doesn’t will do what you want)

If you give them identifiers, you will find that your element is highlighted by its class, and read its identifier, and then remove the highlight class. make +1 to its identifier (find the corresponding element) and set the selection class for this element.

0
source

More articles:


All Articles