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

Question

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?

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.

Thanks!

Answer 1

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

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

EDIT: I corrected the thisHeight to use the $next element that we referenced.

Answer 2

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/

Answer 3

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

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

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

Answer 4

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
{
    // ...
}