如下图，网页中有10个DIV,其内部的文字分别是0 ～ 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for sample</title>
</head>
<style type="text/css">
.container {
width: 100%;
}
.container .item {
margin: 10px auto;
width: 100px;
background: darkgrey;
font-size: 50px;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="item">0</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
那么问题来了： 如何用 简单且高效的方法将图中DIV中的文字倒序排列成下面的结果呢？
小白程序员A:
这还不简单，直接FOR循环搞定，看我直接上代码。
var items = document.querySelectorAll('.container > .item'); // 获取所有的DIV
for (var i = 0; i < items.length; i++) { // 循环更改每个DIV内部的值
var item = items[i];
item.innerText = 9 - i;
}
}
普通程序员B:
依老夫看来，A的做法是很不好的，他犯了DOM编程中的一个大忌，那就是 “不要试图用for循环来连续更改DOM元素”，因为每一次操作DOM的消耗都是很大的，还是看看我怎么写的吧！
// 获取DIV个数
var items = document.querySelectorAll('.container > .item');
var len_items = items.length;
// 在内存中一次性创建好倒序后的结果
// 这样就避免了循环更改DOM元素
var fragment = document.createDocumentFragment();
for(var i=0;i<len_items;i++){
var item = document.createElement('div');
item.classList =['item'];
item.innerText = i;
fragment.appendChild(item);
}
// 向容器中插入结果
var container = document.querySelector('.container');
container.innerHTML = '';
container.appendChild(fragment);
}
大牛程序员C:
为什么一定要用JS实现呢？why? 看看我的吧
setp1. 添加一个样式类
/*以元素中心为原点，旋转180度*/
.rotate {
transform: rotate(180deg);
transform-origin: center;
}
step2. 将这个类应用到container上，结果如下：
<div class="container rotate">
.......
</div>
我们发现整个container都以它的中心为原点旋转了180度，这时候只需要将从container中的每个DIV再旋转180度，就得到最终结果了
step3. 为每个item应用上rotate样式类
<div class="container rotate">
<div class="item rotate">0</div>
<div class="item rotate">1</div>
<div class="item rotate">2</div>
<div class="item rotate">3</div>
<div class="item rotate">4</div>
<div class="item rotate">5</div>
<div class="item rotate">6</div>
<div class="item rotate">7</div>
<div class="item rotate">8</div>
<div class="item rotate">9</div>
</div>
再看看结果：
大功告成！！！！！！！！
在此承认，文章题目有点过于标题党了，但是从上面的问题也可以看出，我们在面对各种问题时，应当拓宽思路多想一想，总会有很多解决方案的。
那么 ， 你还有什么方案呢 ？
