Traversing a list with jQuery

Question

I have a list of items that I want to traverse through from any point in any direction. I also want to loop around the list, meaning if I end up on the last list item and click on next, I want the next item to be the first item on the list. My page is simple, just an unordered list of 5 items, 2 buttons (one for previous and one for next) and a textarea that displays the results. Here is my code:

$(function() {
  var prev = $("#prev"); // grabbing the prev button
  var next = $("#next"); // grabbing the next button
  var listItems = $("#listItems p"); // grabbing the p elements of the list items
  var results = $("#results"); // grabbing the textarea
  var itemText; // variable for holding the text node
  var selectedItem; // variable for the current selected item

  listItems.click(function() { // click event for any item
    itemText = $(this).text(); // selects the text of the clicked list item
    results.text(itemText); // adds text to textarea
    selectedItem = $(this).parent(); // sets selected item as the li element of the selected p element
  });

  next.click(function() { // click event for next button
    var nextItem = selectedItem.next(); // setting the next item
    itemText = nextItem.children("p").text(); // grabbing the text of the next item
    results.text(itemText); // adds text to textarea
    selectedItem = nextItem; // sets next item
  });

  prev.click(function() { // click event for the prev button
    var prevItem = selectedItem.prev(); // setting the prev item
    itemText = prevItem.children("p").text(); // grabbing the text of the prev item
    results.text(itemText); // adds text to textarea
    selectedItem = prevItem; // sets prev item
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="listItems">
        <li><p>First item</p></li>
        <li><p>Item 2</p></li>
        <li><p>Item 3</p></li>
        <li><p>Item 4</p></li>
        <li><p>Last item</p></li>
</ul>
<button id="prev">Prev</button>
<textarea name="results" id="results" cols="30" rows="1"></textarea>
<button id="next">Next</button>

As it sits, when I click on or approach the last item, pressing the next button clears the textarea and renders both buttons unresponsive. Logically, I know that there needs to be an if statement stating if the current item is the last item, then the next item has to be the first item. I just couldn't figure out how to code it. Here is the jsfiddle:

jsfiddle

Answer 1

Building on top of your code, you can check if the current element is the last or the first element, and put some conditions like this:

next.click (function () { // click event for next button
  var nextItem = '';
  if(selectedItem.index() == listItems.length -1 ){//if the last element
      nextItem == listItems[0];
  }else{
    nextItem = selectedItem.next(); // setting the next item
    itemText = nextItem.children("p").text(); // grabbing the text of the next item
    results.text(itemText); // adds text to textarea
    selectedItem = nextItem; // sets next item
  }
});

prev.click (function () { // click event for the prev button
  var prevItem = '';
  if(selectedItem.index() == 0 ){//if the first element
      prevItem == listItems[listItems.length-1]
  }else{
    prevItem = selectedItem.prev(); // setting the prev item
    itemText = prevItem.children("p").text(); // grabbing the text of the prev item
    results.text(itemText); // adds text to textarea
    selectedItem = prevItem; // sets prev item
  }
});