dom反转

最近听好多人说面试的时候,有个dom反转的题,完全没听过啊,应该怎么做,就试着做了一下,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
    <script src="js/jquery-1.11.0.min.js">
    </script>
    <style>
         .div1{
            width: 400px;
            height: 400px;
            background: red;
        }
        .div2{
            width: 300px;
            height: 300px;
            background: green;
        }
        .div3{
            width: 200px;
            height: 200px;
            background:black;
        }
        .div4{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
  <div class="div1">
      <div class="div2">
          <div class="div3">
              <div class="div4"></div>
          </div>
      </div>
  </div>
    
</body>
<script>
    $(function(){
       var divli = $("body").find("div");
        console.log(divli)
        var list1 = [];
        for(var i=0;i<divli.length; i++){
            list1.push($(divli[i]).attr("class"));
        }
        console.log(list1) ;
        var list2 = list1.reverse();
        console.log(list2) ;
        for(var i=0;i<divli.length; i++){
            $(divli[i]).attr("class"," ").addClass(list2[i]);
        }
    })
    
</script>
</html>

如果大家有更好更简洁的思路,可以在下面贴出答案