关于DOM节点的逆序



![](//images0.cnblogs.com/blog/588990/201410/200944383875171.jpg)


今天刷微博的时候看到了这个,竟然敢黑我大JQ!瞬间就忍不住了!

```javascript
  var parentNode = document.querySelector(".reverse");
  var nodeArr = [];
  nodeArr = [].concat.apply(nodeArr, parentNode.children).reverse();
  while(nodeArr.length>0){
  	parentNode.appendChild(nodeArr.shift())
  	console.log(nodeArr)
  }
```

上面是JS的,接下来写一段JQ的

```
  var parentNode = $('.reverse');
  var childNode = parentNode.children();
  $.each(childNode,function(index,node){
  	$(node).prependTo(parentNode);
  	console.log(index,node)
  })
```

上面的代码看上去的思路都应该很清晰,接下来简化下代码。
```
var parentNode = document.querySelector('.reverse');
[].slice.apply(parentNode.children).reverse().reduce(function(x,y){parentNode.appendChild(y)});
```
`querySelector`和`reduce`都是Ecmascript5里面的新方法,当然如果你要丧心病狂的把parentNode替换掉的话,我也不反对。。

接下来看!!!简化的JQ多简单!!!1行!!只要1行!!!
```
$.each($('.reverse').children(),function(index,node){$(node).prependTo(parentNode);})
```

posted @ 2014-10-20 10:13  Nunn  阅读(508)  评论(0编辑  收藏  举报