Moving a list with jQuery

Question

I have a list of elements that I want to go through any point in any direction. I also want the loop around the list, that is, if I get to the last item in the list and click on next, I want the next item to be the first item in the list. My page is simple, just an unordered list of 5 elements, 2 buttons (one for the previous one and one for the next) and a text box 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> 

When he sits, when I press or move closer to the last element, pressing the next button clears the text field and makes both buttons inactive. Logically, I know that there should be an if statement indicating whether the current element is the last, then the next element should be the first element. I just couldn't figure out how to code it. Here is the jsfiddle:

jsfiddle

Answer 1

 $(function () { var prev = $("#prev"); var next = $("#next"); var listItems = $("#listItems p"); var results = $("#results"); var itemText; var selectedItem; listItems.click (function () { itemText = $(this).text(); results.text(itemText); selectedItem = $(this).parent(); }); next.click (function () { var nextItem = selectedItem.next(); if(nextItem.length==0){ nextItem = $("#listItems li").first(); } itemText = nextItem.children("p").text(); results.text(itemText); selectedItem = nextItem; }); prev.click (function () { var prevItem = selectedItem.prev(); if(prevItem.length==0){ prevItem = $("#listItems li").last(); } itemText = prevItem.children("p").text(); results.text(itemText); selectedItem = prevItem; }); }); 

When it reaches the last or first, set the next element as the last, and first it will solve the problem.

Further:

  if(nextItem.length==0){ nextItem = $("#listItems li").first(); } 

For the previous one:

  if(prevItem.length==0){ prevItem = $("#listItems li").last(); } 

Demo: https://jsfiddle.net/763x97qb/1/

Answer 2

By creating on top of the code, you can check if the current element is the last or first element, and set the following conditions:

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

Answer 3

Not sure if this helps, but here is the jQuery plugin that I came with to reorder the list of elements, starting with the provided index:

 $.fn.reorder = function(head) { var arr = this; var rest = arr.splice(head, arr.length - head); return rest.concat(Array.prototype.slice.call(arr, 0)); }; // make the array start from the 3rd element $.each(listItems.reorder(3), function() { ... 

In this example, calling .reorder(3) move all elements beyond the 3rd index to the beginning of the array, allowing you to $.each over your collection with $.each in the expected order.

Answer 4

You can use the selectedItem.is(':first-child') and selectedItem.is(':last-child') selectors to find if you have reached the beginning or end of the list. You can then select the first or last item in the list by going to the parent item and finding the first / last child using selectedItem.parent().find('li:first') or selectedItem.parent().find('li:last')

 $(function () { var prev = $("#prev"); var next = $("#next"); var listItems = $("#listItems p"); var results = $("#results"); var itemText; var selectedItem; listItems.on('click', function () { itemText = $(this).text(); results.text(itemText); selectedItem = $(this).parent(); }); next.on('click', function () { var nextItem; //if i'm the last child, go to the parent and find the first child if (selectedItem.is(':last-child')) nextItem = selectedItem.parent().find('li:first'); else nextItem = selectedItem.next(); itemText = nextItem.children("p").text(); results.text(itemText); selectedItem = nextItem; }); prev.on('click', function () { var prevItem; //if im the first child, go to the parent to find the last if (selectedItem.is(':first-child')) prevItem = selectedItem.parent().find('li:last'); else prevItem = selectedItem.prev(); itemText = prevItem.children("p").text(); results.text(itemText); selectedItem = prevItem; }); }); 

Answer 5

Try using id of button for looping text next , prev

 var results = $("#results"); var items = $("#listItems li") // show first `li p` text results.text(items.eq(0).addClass("active").find("p").text()); function cycle(idx) { var active = $(".active") // cycle through `next` , `prev` `li` elements , next = active[idx]().is("*") ? active[idx]() : idx === "prev" ? active.siblings().eq(active.index("li") - 1) : active.siblings().addBack().eq(0); active.removeClass("active"); // set text of `results` with `next` , `prev` `li p` text results.text(next.addClass("active").find("p").text()); }; $("button").on("click", function(e) { cycle(this.id) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>