javascript - Cycle between elements and change the class to the next one -

is possible?

i have 20 elements various dynamic classes, of them equal. there way move current class next 1 , on this?

initial

el1 - classa el2 - classhh el3 - classkl el4 - classui el3 - classkl el4 - classyy

to

el1 - classyy el2 - classa el3 - classhh el4 - classkl el3 - classui el4 - classkl

i have been struggling while , can't right.. thought removing , adding class's while on loop, equal classes bugging me out..

thank help.

are looking such kind of behavior:

$(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>