web-dev-qa-db-ja.com

.next（）をループするにはどうすればよいですか？

同じクラスのdivが3つあります。クリックすると、次のDIVにクラス 'selected'を追加し、前のクラスから削除します。正常に機能していますが、ループさせたいです。

現在、1-> 2-> 3から、ループさせたい、3-> 1、助けてください...

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リンク： http://jsfiddle.net/madhuri2987/KK66g/2/

jqueryloopsnext
16
itsMe

最も簡単な方法は、.next()が存在するかどうかを確認し、存在しない場合は最初に「選択」することです。

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

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

27
Explosion Pills

これがすべての場合に機能すると主張すべきかどうかはわかりませんが、最初から最後まで有効ではないことに進むことができるかどうか常に疑問に思っていました。これは私が解決したものです：

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

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

これは、最初に_.section_の後にある_.selected_を選択します。

_.selected + .section
_

また、セカンダリセレクターを追加して、少なくとも1つの一致を確認して取得します。

_, .section:eq(0)
_

上記は、この比較的単純な例で、最初の$('.section')[0]を表しています。次に、複合選択の結果に.last()を使用して、結果_[1]_（有効な.next()一致となるもの）または_[0]_のいずれかを取得します。最初の一致の場合（.last()はfirstとlastリストに結果が1つしかない場合）。

セレクターは.last()の使用とは逆の順序になっているように見えますが、これは.first()の代わりに機能しているようです。そのため、その理由は必ずしもわかりません。これは セレクターの順序に関係なく なので、選択に意味のある方法で順序付けました。

その後、残りは簡単です。セレクターが.last()を返したクラスを追加し、次に.siblings()を（新しく）選択した_.section_と_.selected_で見つけます（他の1つは選択しているもの）を削除し、_.selected_クラスを削除します。

うまくいくようです。これが信頼できるかどうかについてのコメントを聞きたいと思います。

2
Jared Farrish

私はこのような簡単なコードを実行しました

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');}
});
0
Phong Vo

CoffeeScript

私がそれを使用している人々のために共有すると思った私の単純なCoffeeScriptソリューション：

_$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')
_

注：ループに含めたくない兄弟がある場合は、必ず適切なselectorをnext()とsiblings()に渡してください/サイクル。

0
Joshua Pinter