クリックごとに次のliタグを選択

Question

jQuery noobを使用すると問題が発生し、解決方法がわかりません： 私はulタグとその中のliタグを持っていますこれを達成しようとしています。：最初のliタグを選択し、ボタンの最初クリックで、二クリックでように二のliタグを選択して... あなたは予想通り、これは動作しないことがわかります（それが選択する第1および2番目のタグ） 誰かが私を助けたり正しい方向に向けることができますか？ここにjsFiddleリンクがあります：http：//jsfiddle.net/aH8w2/ありがとう!!!

​​

Answer 1

このお試しください：最後に到達したとき、再びリストの先頭にジャンプし

$("button").click(function(){  

    $('.red').removeClass('red').next('li').addClass('red'); 

}); 

Answer 2

別の方法を、：

var $lis = $('ul > li'); 

$("button").click(function(){ 
    var $selected = $('.red').removeClass('red'); 
    ($selected.next().length > 0 ? $selected.next() : $lis.first()).addClass('red'); 
}); 

またはビット短い：

($selected.next().get(0) || $lis[0]).className += 'red'; 

DEMO

Answer 3

これを試してみてください：

$("button").click(function(){ 
var current = $('ul li.red'); 
current.first().next('li').addClass('red'); 
current.removeClass('red'); 
}); 

これは、あなたが持っていることを前提に、少なくとも「赤」である1 li。

Answer 4

DEMO

$("button").click(function(){  
    if($('.red').length > 0) { 
     $('.red').removeClass('red').next().addClass('red'); 
    } else { 
     $('li:first').addClass('red'); 
    } 
}); 

また、あなたの最初のliに.firstは必要ありません。 jQueryは最初に一致する項目を選択するli:firstを実行できます。

Answer 5

はこれを試してみてください：

$(document).ready(function(){ 
    $("button").click(function(){  
     if($('.red').length == 0 || $('.red').next().length == 0){ 
      $('.red').removeClass('red'); 
      $('.first').addClass('red'); 
     }else{ 
      $('.red').removeClass('red').next().addClass('red'); 
     } 
    }); 

}); 

これは最初のクリックだけでなく、すべての後続のクリックの世話をします。あなたが最後に達したら、最初に戻ってください。