jQuery: comment savoir quand next() atteint la fin, puis aller au premier élément

Question

J'affiche une série d'éléments en utilisant la fonction next(). Une fois que j'atteins la fin, je veux aller au premier élément. Des idées?

Voici le 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); 
}); 

Fondamentalement, je besoin d'un « si » qui dit «s'il n'y a pas d'éléments « Suivant » restants, puis trouver le premier

Merci

!

Answer 1

Déterminer la .next() avance en vérifiant sa propriété length.

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

Par ailleurs, vous pouvez remplacer .parent().parent().parent() avec .closest('.newsSingle') (si votre balisage permet). J'ai corrigé le thisHeight pour utiliser l'élément $next que nous avons référencé.

Answer 2

Selon la documentation jquery, un objet jquery vide retournera .length 0.

alors ce que vous devez faire est de vérifier le retour lorsque vous appelez .next, un e puis appelez: d'abord

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

Answer 3

En référence utile, ce qui suit est une fonction que vous pouvez écrire et inclure:

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

Au lieu de:

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

Il serait:

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

Référence: http://www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

Answer 4

Vous pouvez utiliser ces fonctions pour voir si l'élément actuel est le premier/dernier enfant.

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