在元素之间循环并将类更改为下一个

Question

这样的事情可能吗？

我有20个具有各种动态类的元素，但其中一些是相同的。 有没有办法将当前的类移动到下一个类，依此类推？

初​​始

El1 - classA El2 - classHH El3 - classKL El4 - classUI El3 - classKL El4 - classYY

到

El1 - classYY El2 - classA El3 - classHH El4 - classKL El3 - classUI El4 - classKL

我一直在努力解决这个问题，但我无法做到正确。 我考虑过在循环中移除和添加类，但额外相同的类正在困扰我..

感谢您的帮助。

Answer 1

您是否正在寻找此类行为：

＆＃13;

＆＃13;

$(document).ready(function(){
  var container = $("ul");
	$("#changeClass").click(function(){
  	shiftClasses();
  })
  function shiftClasses(){
  	var arrClass = [];
  	var allChild = container.children();
    $(allChild).each(function(index,obj){
    	var cls = $(obj).attr("class");
    	arrClass.push(cls);
      $(obj).removeAttr("class");
    });
    var last = arrClass.pop();
    arrClass.splice(0, 0, last);
    
    $(allChild).each(function(index,obj){
    	$(obj).addClass(arrClass[index]);
    });
  }
})

＆＃13;

.blue{
  background: blue;
}
.red{
  background: red;
}
.yellow{
  background: yellow;
}
.green{
  background: green;
}
ul,li{
  list-style: none;
}
li{
  border: 1px solid black;
  margin-top:20px;
  width:100px;
  height:20px;
  text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li class="blue">1</li>
  <li class="red">2</li>
  <li class="yellow">3</li>
  <li class="green">4</li>
</ul>

<button id="changeClass">Shift Class </button>

＆＃13;

＆＃13;

＆＃13;