jquery - next（）がいつ終了するかを確認し、最初の項目に移動する方法

Question

next（）関数を使用して一連の要素を表示しています。でも最後になったら、最初の要素に行きたいです。何か案は？

コードは次のとおりです。

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

基本的に、「次の」要素が残っていない場合は、最初の要素を見つけるという「if」ステートメントが必要です。

ありがとう！

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