

jQueryでクラスを置き換えるにはどうしたらよいでしょうか。

1秒後にclass="n1"がclass="n10"に変更  
1秒後にclass="n2"がclass="n1"に変更  
2秒後にclass="n3"がclass="n2"に変更  
3秒後にclass="n4"がclass="n3"に変更  
4秒後にclass="n5"がclass="n4"に変更  
5秒後にclass="n6"がclass="n5"に変更  
6秒後にclass="n7"がclass="n6"に変更  
7秒後にclass="n8"がclass="n7"に変更  
8秒後にclass="n9"がclass="n8"に変更  
9秒後にclass="n10"がclass="n9"に変更  
10秒後は1秒後からの繰り返しです。

あらかじめcssでは、n1～n10の座標（position）を指定していますので、1秒ごとに移動するイメージです。  
classは、n10迄、計10個ある為、jQueryでcssの位置を設定するのではなく、クラス名を変更したく以下、試しに書いてみても移動せず。ご教示お願いいたします。

[code]

    $(function(){
        $(".n2")
        setTimeout(function(){
            $('.n2').toggleClass('n1');
        },3000);
    });
    
[/code]

■追記です。  
class="n1"だけ1秒停止はどのように書いたらよいでしょうか。gochoさまのサンプルを使わせていただき、変数classNameListを入れてみましたが、以下では動きませんでした。stopの定義？関数の設定がわかりません。

[code]

    if (classNameList='n1'){
        setTimeout( 'stop',1000 );
    }
    
[/code]


CC BY-SA 4.0
2015-05-29T06:04:02.003
10747
2019-12-13T19:01:38.587
2019-12-13T19:01:38.587
32986
8745
question
jquery
jQueryでクラスを置き換えるにはどうしたらよいでしょうか。


classNameの変更操作とclassNameによるノード選択を逐次的に行うと、処理前のノードと処理後のノードが混ざってしまってうまくいかないと思います  
一旦classNameを変更したいノード群を変数に格納することをお勧めします

実装例:

[code]

    (function() {
      var $wrapper = $('.wrapper')
      var classNameList = [
        'n1', 'n2', 'n3', 'n4', 'n5',
        'n6', 'n7', 'n8', 'n9'
      ];
      setInterval(function() {
        // classNameの変更によってquerySelectorの結果が変わらないように、querySelectorの結果を保持
        var nodes = classNameList.map(function(className) {
          return {
            className: className,
            $node: $wrapper.find('.' + className)
          };
        });
        nodes.forEach(function(current, currentIndex, whole) {
          var nextIndex = (currentIndex === whole.length - 1) ? 0 : currentIndex + 1;
          current.$node.removeClass(current.className);
          current.$node.addClass(whole[nextIndex].className);
        });
      }, 1000);
    })();
[/code]

[code]

    .something {
      width: 30px;
      height: 30px;
      float: left;
    }
    
    .n1 {
      background-color: #EDF
    }
    
    .n2 {
      background-color: #FED
    }
    
    .n3 {
      background-color: #DFE
    }
    
    .n4 {
      background-color: #EFD
    }
    
    .n5 {
      background-color: #DEF
    }
    
    .n6 {
      background-color: #FDE
    }
    
    .n7 {
      background-color: #DEF
    }
    
    .n8 {
      background-color: #FDE
    }
    
    .n9 {
      background-color: #EFD
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <div class="wrapper">
      <div class="something n1"></div>
      <div class="something n2"></div>
      <div class="something n3"></div>
      <div class="something n4"></div>
      <div class="something n5"></div>
      <div class="something n6"></div>
      <div class="something n7"></div>
      <div class="something n8"></div>
      <div class="something n9"></div>
    </div>
[/code]


CC BY-SA 4.0
2015-05-29T07:36:31.257
10750
2019-12-13T19:01:25.043
2019-12-13T19:01:25.043
32986
9796
10747
answer


次の様な感じでいいかと思います。

[code]

    $(function(){
        var i = 1;//開始の番号
        setInterval(function(){
            var next_i = (i==1) ? 10 : i-1;//10は最大の番号
            $(".n" + i).toggleClass("n" + next_i).toggleClass("n" + i);
            ++i;
        }, 1000);
    }); 
    
[/code]


CC BY-SA 3.0
2015-05-29T08:19:24.657
10757
2015-05-29T10:02:15.160
2015-05-29T10:02:15.160
5044
5044
10747
answer


以下の2つの機能を実現したいということで良いでしょうか。

  * 1秒ごとに指定のクラスを全て順次入れ替えていく
  * n9→n8のように、nから始まるCSSのクラスから 1を引いたクラス名に置き換える

これでしたら以下のコードを参考にしてください。

[code]

    $(document).ready(function() {
        var cnt = 0;
    
        // 繰り返し処理
        ( function loop() {
            if ( cnt <= 10 ) {
                // クラス名の置き換えを実施
                replacer();
    
                // 1秒後に自身(loop)をコール
                setTimeout( loop , 1000 );
            }
    
            cnt += 1;
        })();
    });
    
    /** 置き換えるCSSクラス名の接頭辞 */
    var target = "n";
    
    /**
     * クラスの置き換え処理。
     */
    var replacer = function() {
        // 前方一致で、div要素のクラス名が 変数target で始まるものを全て抽出する
        $.each($("div[class^=" + target + "]") , function() {
    
            // 取り出したクラス名を取得
            var name = $(this).attr('class');
            var len = target.length;
    
            // クラス名を置き換え後の名前を決める。n8→n7に。
            var toName = name.substring(0,len) + ( name.substring(len) - 1);
    
            // 旧クラス名を削除→置き換え後のクラス名に置き換える。
            $(this).removeClass( name ).addClass( toName );
        });
    };
    
[/code]

toggleClass()は、指定したクラスがない場合は削除、あった場合は追加する機能です。

なお、このコードは最低限の動作確認をしただけのコードですので、以下には対応していません。

  * n10など、数字の部分が2桁以上
  * 他にnから始まるdivがあった場合も変換してしまう


CC BY-SA 3.0
2015-05-29T08:21:52.253
10758
2015-05-29T08:21:52.253
5778
10747
answer