Skip to main content
本文に 1964 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

実装例:
https://jsfiddle.net/gocho/q1aw67kw/

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

実装例:

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

ソース リンク
gocho
  • 1,011
  • 5
  • 18

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

実装例:
https://jsfiddle.net/gocho/q1aw67kw/