关于DOM节点的逆序

最新推荐文章于 2022-08-21 15:41:25 发布

weixin_30920513

最新推荐文章于 2022-08-21 15:41:25 发布

阅读量213

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nunn/p/4036586.html

版权

![](https://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);})
```

转载于:https://www.cnblogs.com/nunn/p/4036586.html