Question

我有一个项目列表，我想从任何方向的任何方向穿过。我还想在列表中循环，这意味着如果我最后列出最后一个列表项并单击下一个，我希望下一个项目成为列表中的第一个项目。我的页面很简单，只是一个5个项目的无序列表，2个按钮（一个用于前一个，一个用于下一个）和一个显示结果的textarea。这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

当它坐下时，当我点击或接近最后一个项目时，按下下一个按钮会清除textarea并使两个按钮无响应。从逻辑上讲，我知道需要一个if语句来说明当前项是否是最后一项，那么下一项必须是第一项。我只是无法弄清楚如何编码它。这是jsfiddle：

jsfiddle

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

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)会将超出第3个索引的所有元素移动到数组的前面，然后您可以按预期顺序使用$.each遍历集合。

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

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/

Answer 5

尝试使用id button来循环播放文字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>

使用jQuery

5 个答案: