web-dev-qa-db-ja.com

next（）が最後に到達したことを確認し、最初の項目に移動する方法

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」ステートメントが必要です。

ありがとう！

jquerynext
30
HandiworkNYC.com

lengthプロパティをチェックして、事前に.next()を決定します。

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

ところで、.parent().parent().parent()を.closest('.newsSingle')に置き換えることができます（マークアップで許可されている場合）。

編集：参照した_$next_要素を使用するようにthisHeightを修正しました.

31
user113716

参考として、次の関数を記述して含めることができます。

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

の代わりに：

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

それはそのようになります：

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

リファレンス： http://www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

20
lucuma

jqueryドキュメントによると、空のjqueryオブジェクトは.length 0を返します。

したがって、必要なのは、.nextを呼び出してから：firstを呼び出すときに戻りを確認することです。

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

6
Oren Mazor

これらの関数を使用して、現在のアイテムが最初/最後の子であるかどうかを確認できます。

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