jQuery 如何找出 next() 何时到达末尾，然后转到第一项

How to find out when next() reaches the end, then go to the first item

提问by HandiworkNYC.com

I am displaying a series of elements using the next() function. Once I reach the end though, I want to go to the first element. Any ideas?

我正在使用 next() 函数显示一系列元素。但是，一旦我到达终点，我就想去第一个元素。有任何想法吗？

Here's the code:

这是代码：

//Prev / Next Click
$('.nextSingle').click( function() {
    //Get the height of the next element
    var thisHeight = $(this).parent().parent().parent().next('.newsSingle').attr('rel');
    //Hide the current element
    $(this).parent().parent().parent()
        .animate({
            paddingBottom:'0px',
            top:'48px',
            height: '491px'
        }, 300) 
        //Get the next element and slide it in      
        .next('.newsSingle')
        .animate({
            top:'539px',
            height: thisHeight,
            paddingBottom:'100px'
        }, 300);
});

Basically I need an "if" statement that says "if there are no remaining 'next' elements, then find the first one.

基本上我需要一个“if”语句，它说“如果没有剩余的‘下一个’元素，那么找到第一个。

Thanks!

谢谢！

回答by user113716

Determine the .next()ahead of time by checking its lengthproperty.

.next()通过检查其length属性提前确定。

$('.nextSingle').click( function() {
       // Cache the ancestor
    var $ancestor = $(this).parent().parent().parent();
       // Get the next .newsSingle
    var $next = $ancestor.next('.newsSingle');
       // If there wasn't a next one, go back to the first.
    if( $next.length == 0 ) {
        $next = $ancestor.prevAll('.newsSingle').last();;
    }

    //Get the height of the next element
    var thisHeight = $next.attr('rel');

    //Hide the current element
    $ancestor.animate({
            paddingBottom:'0px',
            top:'48px',
            height: '491px'
        }, 300);

        //Get the next element and slide it in      
    $next.animate({
            top:'539px',
            height: thisHeight,
            paddingBottom:'100px'
        }, 300);
});

By the way, you could replace .parent().parent().parent()with .closest('.newsSingle')(if your markup allows it).

顺便说一句，您可以替换.parent().parent().parent()为.closest('.newsSingle')（如果您的标记允许）。

EDIT:I corrected the thisHeightto use the $nextelement that we referenced.

编辑：我更正了thisHeight使用$next我们引用的元素。

回答by lucuma

As a useful reference, the following is a function you can write and include:

作为有用的参考，以下是您可以编写并包含的函数：

$.fn.nextOrFirst = function(selector)
{
  var next = this.next(selector);
  return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector)
{
  var prev = this.prev(selector);
  return (prev.length) ? prev : this.nextAll(selector).last();
};

Instead of:

代替：

var $next = $ancestor.next('.newsSingle');
   // If there wasn't a next one, go back to the first.
if( $next.length == 0 ) {
    $next = $ancestor.prevAll('.newsSingle').last();;
}

It would be:

这将是：

$next = $ancestor.nextOrFirst('.newsSingle');

Reference: http://www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

参考：http: //www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

回答by Oren Mazor

according to the jquery documentation, an empty jquery object will return of .length 0.

根据 jquery 文档，一个空的 jquery 对象将返回 .length 0。

so what you need to do is check for the return when you call .next, and then call :first

所以你需要做的是在调用 .next 时检查返回值，然后调用 :first

http://api.jquery.com/next/

http://api.jquery.com/next/

回答by Martijn Wieringa

You can use these functions to see if the current item is the first/last child.

您可以使用这些函数来查看当前项是否是第一个/最后一个子项。

jQuery.fn.isFirst = function() { return (this[0] === this.parent().children().first()[0]); };
jQuery.fn.isLast = function() { return (this[0] === this.parent().children().last()[0]); };

if($ancestor.isLast())
{
    // ...
}
else
{
    // ...
}