使用jQuery遍历列表

Question

我有一个项列表，想要从任意点以任何方向遍历它。我还想循环遍历该列表，这意味着如果我在最后一个列表项上并点击下一个，我希望下一个项是列表中的第一个项。我的页面很简单，只是一个包含5个项目、2个按钮（一个用于上一个，一个用于下一个）和显示结果的文本区域的无序列表。以下是我的代码：

$(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链接: jsfiddle

- gFused

Answer 1

在您的代码基础上，您可以检查当前元素是否为最后一个或第一个元素，并添加一些条件，例如：

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

- renakre

Answer 2

不确定这是否有帮助，但这是我想出来的一个 jQuery 插件，可以重新排列从提供的索引开始的元素列表：

$.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() { ...

在这个例子中，调用.reorder(3)将把第三个索引以后的所有元素移到数组的前面，然后你可以按照预期的顺序使用$.each来遍历你的集合。

- Rob M.

Answer 3

您可以使用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;
  });
});

- anthonybell

Answer 4

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

演示：https://jsfiddle.net/763x97qb/1/

- Vishwajeet Bose

Answer 5

尝试利用按钮的id来循环显示下一个和上一个文本。

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>

- guest271314