div上下循环移动

(function() {
//向下移动
var divContainer = document.getElementById('container');
var listOfDiv = divContainer.getElementsByTagName('div');
for(var i = 0; i < listOfDiv.length; ++i) {
listOfDiv[i].currentIndex = i;
var downBtn = document.createElement('button');
downBtn.className = 'btn down';
downBtn.innerHTML = '向下移动';
downBtn.onclick = function() {
var div = this.parentNode;
var index = div.currentIndex;
// 如果当前div已经是最后一个div，那么就把这个div放到所有div的开头
if(index === listOfDiv.length - 1) {
// 找到第一个div
var firstDiv = listOfDiv[0];
div.parentNode.insertBefore(div, firstDiv);
// 把移动到开头的div的currentIndex设置为0
div.currentIndex = 0;
// 把除了开头以外的每个div，它的currentIndex属性都加1
for(var u = 1; u < listOfDiv.length; ++u) {
listOfDiv[u].currentIndex = listOfDiv[u].currentIndex + 1;
}
} else {
// 找到这个div的下一个div
var nextDiv = div.parentNode.children[index + 1];
div.parentNode.insertBefore(div, div.parentNode.children[index + 2]);
div.currentIndex = index + 1;
// 将下一个div的currentIndex属性也修改为正确的
nextDiv.currentIndex = index;
}
};
listOfDiv[i].appendChild(downBtn);
}
//向上移动
for(var j = 0; j < listOfDiv.length; j++){
listOfDiv[j].currentIndex = j;
var upBtn = document.createElement('button');
upBtn.className = 'btn up';
upBtn.innerHTML = '向上移动';
upBtn.onclick = function() {
var div = this.parentNode;
var index = div.currentIndex;
// 如果当前div已经是最后一个div，那么就把这个div放到所有div的开头
if(index === 0) {
// 找到最后一个div
var lastDiv = listOfDiv[listOfDiv.length];
div.parentNode.insertBefore(div, lastDiv);
// 把移动到开头的div的currentIndex设置为0
div.currentIndex = listOfDiv.length - 1;
// 把除了开头以外的每个div，它的currentIndex属性都加1
for(var u = listOfDiv.length - 2; u >= 0; u--) {
listOfDiv[u].currentIndex = listOfDiv[u].currentIndex - 1;
}
} else {
// 找到这个div的下一个div
var nextDiv = div.parentNode.children[index - 1];
div.parentNode.insertBefore(div, div.parentNode.children[index - 1]);
div.currentIndex = index - 1;
// 将下一个div的currentIndex属性也修改为正确的
nextDiv.currentIndex = index;
}
};
listOfDiv[j].appendChild(upBtn);
}
})();