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

通过检查 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') (如果您的标记允许它)。

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