我有一个项目列表，我想从任何方向任何方向遍历。我还想在列表中循环，这意味着如果我最后列出最后一个列表项并单击下一个，我希望下一个项目成为列表中的第一个项目。我的页面很简单，只是一个5个项目的无序列表，2个按钮（一个用于前一个，一个用于下一个）和一个显示结果的textarea。这是我的代码：
$(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>当它坐下时，当我点击或接近最后一个项目时，按下下一个按钮会清除textarea并使两个按钮都无法响应。从逻辑上讲，我知道需要一个if语句来说明当前项是否是最后一项，那么下一项必须是第一项。我只是想不出如何编码它。这是jsfiddle：
$(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;
});
});
当它到达最后一个或第一个使下一个元素设置为最后一个时，这将解决问题。
下一个：
if(nextItem.length==0){
nextItem = $("#listItems li").first();
}
对于上一个：
if(prevItem.length==0){
prevItem = $("#listItems li").last();
}
但是：ぁzxswい
在代码的基础上，您可以检查当前元素是最后一个元素还是第一个元素，并添加如下条件：
https://jsfiddle.net/763x97qb/1/
不确定这是否有帮助，但这是一个jQuery插件，我想出来从提供的索引开始重新排序元素列表：
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
}
});
在该示例中，调用$.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() { ...
会将超出第3个索引的所有元素移动到数组的前面，这样您就可以按照预期的顺序使用.reorder(3)迭代集合。
您可以使用$.each和selectedItem.is(':first-child')选择器查找是否已到达列表的开头或结尾。然后，您可以通过转到父级并使用selectedItem.is(':last-child')或selectedItem.parent().find('li:first')查找第一个/最后一个孩子来选择列表的第一个或最后一个元素
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;
});
});
的id循环文本button，next
prevvar 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)
});