wie kann ich die Schleife .next()?

Ich habe 3 divs mit der gleichen Klasse, ich bin Klasse hinzufügen 'ausgewählt', um das NÄCHSTE DIV-Element auf klicken Sie auf und entfernen es aus der vorherigen Klasse, seine Arbeit gut, aber ich möchte die Schleife, die Sie

Zeit von 1 --> 2 --> 3, ich will es, um eine Schleife, 3-->1, bitte um Hilfe...

HTML

<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

CSS

.selected{background:red}

JS

$('#button').click(function(){
    $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
});

JS Fiddle Link : http://jsfiddle.net/madhuri2987/KK66g/2/

InformationsquelleAutor der Frage itsMe | 2013-03-26

  1. 26

    Der einfachste Weg wäre einfach zu überprüfen, ob .next() existiert, und wenn nicht "auswählen" die erste.

    var $next = $('.section.selected').removeClass('selected').next('.section');
if ($next.length) {
    $next.addClass('selected'); 
}
else {
    $(".section:first").addClass('selected');
}

    http://jsfiddle.net/KK66g/3/

    InformationsquelleAutor der Antwort Explosion Pills

  2. 2

    Ich bin mir nicht sicher, ob ich sollte behaupten, das funktioniert in jedem Fall, aber ich habe mich immer gefragt, ob es möglich wäre, Fortschritte zu den ersten auf der letzten nicht gültig. Dies ist, was ich erarbeitet:

    $('#button').click(function(){
    $('.selected + .section, .section:eq(0)')
        .last().addClass('selected')
        .siblings('.selected').removeClass('selected');
});

    http://jsfiddle.net/userdude/9UFD2/

    Was dies bedeutet ist, wählen Sie zuerst die .section die nach .selected:

    .selected + .section

    Ich auch hinzufügen einer sekundären Wahlschalter auf stellen Sie sicher, und erhalten mindestens einen Treffer:

    , .section:eq(0)

    Den oben stellt den ersten $('.section')[0] in diesem relativ einfachen Beispiel. Dann benutze ich .last() auf das Ergebnis der compound-Auswahl, dass Sie mir entweder Ergebnis [1] (denn was wäre eine gültige .next() - match), oder [0] für ein erstes Spiel (siehe .last() geben sowohl ersten und letztenwenn es nur ein Ergebnis in der Liste).

    Obwohl die Selektoren sind bestellt, scheinbar gegensätzlichen Verwendung von .last() dies scheint zu funktionieren, anstatt .first()für die ich nicht unbedingt verstehen, der Grund, warum das so ist. Dies ist welche Reihenfolge der Selektoren werden inalso bestellte ich Sie so, wie Sie sinnvoll in die Auswahl.

    Dann, der rest ist einfach. Fügen Sie eine Klasse zu welcher der Selektor zurückgegeben .last()dann finden Sie die .siblings() zu, dass die (neu) ausgewählten .section mit .selected (das einzige andere wäre die, die wir wählen Weg aus), und entfernen Sie es .selected Klasse.

    Scheint es zu funktionieren. Ich nehme an, würde ich gerne hören, irgendwelche Kommentare, ob diese zuverlässig ist oder nicht.

    InformationsquelleAutor der Antwort Jared Farrish

  3. 0

    Ich habe einen einfachen code wie diesen

    var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});

    InformationsquelleAutor der Antwort Phong Vo

  4. 0

    CoffeeScript

    Meine einfache CoffeeScript Lösung, die ich dachte, ich würde teilen, für diejenigen, die es verwenden:

    $currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')

    HINWEIS: Stellen Sie sicher, dass die jeweiligen selector zu next() und siblings() wenn es Geschwister sind, die Sie nicht einschließen möchten in Ihrem loop/cycle.

    InformationsquelleAutor der Antwort Joshua Pinter

Schreibe einen Kommentar