jQuery: Wie finde ich heraus, wenn next () das Ende erreicht, dann gehe zum ersten Punkt

Ich bin anzeigen einer Reihe von Elementen mit Hilfe der next () - Funktion. Sobald ich das Ende zu erreichen, obwohl, ich möchte gehen auf das erste element. Irgendwelche Ideen?

Hier der 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);
});

Im Prinzip brauche ich eine "if" - Anweisung, die sagt "wenn es keine verbleibenden "weiter" - Elemente, dann finden Sie das erste.

Dank!

InformationsquelleAutor der Frage j-man86 | 2010-08-28

  1. 28

    Bestimmen die .next() vor der Zeit, indem Sie seine length Eigenschaft.

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

    Durch die Art und Weise, die Sie ersetzen könnte .parent().parent().parent() mit .closest('.newsSingle') (wenn Ihr markup erlaubt es).

    EDIT: korrigierte ich die thisHeight zu verwenden, die $next element, auf das wir verwiesen wird.

    InformationsquelleAutor der Antwort user113716

  2. 15

    Als nützliche Referenz, die folgende ist eine Funktion, die Sie schreiben können, und umfassen:

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

    Statt:

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

    Wäre es:

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

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

    InformationsquelleAutor der Antwort lucuma

  3. 4

    laut jquery Dokumentation, eine leere jquery-Objekt zurück .Länge 0.

    also, was Sie tun müssen, ist überprüfen Sie für die Rücksendung, wenn Sie anrufen .weiter, und dann rufen :erste

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

    InformationsquelleAutor der Antwort Oren Mazor

  4. 1

    Können Sie diese Funktionen verwenden, um zu sehen, ob das aktuelle Element ist das erste/Letzte Kind.

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

    InformationsquelleAutor der Antwort Martijn Wieringa

Schreibe einen Kommentar