在元素之间循环，然后将类更改为下一个类

Cycle between elements and change the class to the next one

本文关键字：下一个 然后 元素 之间 循环      更新时间：2023-09-26

这样的事情可能发生吗？

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

初始

El1-A级El2-等级HHEl3-KL级El4-classUIEl3-KL级El4-类别YY

至

El1-类别YYEl2-A级El3-HH级El4-KL级El3-classUIEl4-KL类

我已经为此挣扎了一段时间，但我做不好。。我曾想过在循环中删除和添加类的，但这些额外相等的类正在困扰我。。

谢谢你的帮助。

你在寻找这样的行为吗：

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

相关文章：