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/