У меня есть список элементов, которые я хочу пройти через любую точку в любом направлении. Я также хочу, чтобы цикл вокруг списка, то есть, если я попаду в последний элемент списка и нажмите дальше, я хочу, чтобы следующий элемент был первым элементом в списке. Моя страница проста, просто неупорядоченный список из 5 элементов, 2 кнопки (один для предыдущего и один для следующего) и текстовое поле, которое отображает результаты. Вот мой код:Перемещение списка с помощью jQuery
$(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>Как он сидит, когда я нажимаю или подойти последний элемент, нажав на кнопку рядом очищает текстовое поле и делает обе кнопки не реагирует. Логически, я знаю, что должен быть оператор if, указывающий, является ли текущий элемент последним, тогда следующий элемент должен быть первым элементом. Я просто не мог понять, как его кодировать. Вот jsfiddle: