zoukankan      html  css  js  c++  java
  • 关于DOM节点的逆序

    
    
    ![](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);})
    ```
    
    
  • 相关阅读:
    java学习笔记4对象的初始化与回收
    java学习笔记2数据类型、数组
    java学习笔记3类与对象的基础
    java学习笔记5类的方法
    java学习笔记1开发环境平台总结
    BZOJ 4843
    SPOJ TTM
    BZOJ 4154
    POJ 3680
    半平面交模板 HDU 1469
  • 原文地址:https://www.cnblogs.com/nunn/p/4036586.html
Copyright © 2011-2022 走看看