removeattribute - jQuery: cómo averiguar cuándo next() llega al final, luego ve al primer elemento

jquery prop

Question

Estoy mostrando una serie de elementos usando la función next (). Sin embargo, una vez que llegue al final, quiero ir al primer elemento. ¿Algunas ideas?

Aquí está el código:

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

Básicamente, necesito una declaración "si" que diga "si no hay elementos ''siguientes'' restantes, luego encuentre el primero.

¡Gracias!

Answer 1

Como una referencia útil, la siguiente es una función que puede escribir e incluir:

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

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

Podría ser:

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

Referencia: http://www.mattvanandel.com/999/jquery-nextorfirst-function-guarantees-a-selection/

Answer 2

De acuerdo con la documentación de jquery, un objeto jquery vacío regresará de .length 0.

así que lo que debe hacer es verificar la devolución cuando llame a .next, y luego llame: primero

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

Answer 3

Determine .next() antes de tiempo al verificar su propiedad de 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);
});

Por cierto, podría reemplazar .parent().parent().parent() por .closest(''.newsSingle'') (si su marca lo permite).

EDITAR: thisHeight para usar el $next elemento $next que hicimos referencia.

Answer 4

Puede usar estas funciones para ver si el elemento actual es el primer / último elemento secundario.

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