需求

來自於移動端web需要一個樹狀圖，但分支有些内容多，有些内容少，就會呈現“缺失”的狀態，如下：

第一個方塊底下有空隙”

原因

其原因是因爲各層連接綫是由方塊的偽類+div的border實現的，所以如果樹狀圖中各個方塊的高度不一，就會出現中間的“缺失”。并且如果樹狀圖的每個方塊高度一致，整個圖也會顯得較爲美觀。
但是方塊的高度不能寫死，如果後期需要修改方塊裏的内容或是增加内容，寫死將會給修改帶來麻煩。由於CSS無法自動計算方塊的高度，所以用jQuery來計算。

思路

高度保持一致，指的是每層方塊的高度一致，無需整個樹狀圖高度一致。
1、首先，讀出所需層的每個方塊的高度值（現高度是由方塊内容撐開的）；
2、其次，將第一個方塊的高度值作爲這層中所有方塊中的最高高度max；
3、再者，將每個方塊的高度值代入，判斷代入的高度值是否大於max；
4、如果大於max，將此高度值取代原來max的值，如果小於，則不計；
5、最後，將max作爲所需層所有方塊的高度值。

代碼

    <script type="text/javascript">
      $(function(){
        //設一個變量b為所需層的所有方塊
        var b = $(".two").children(".list-square").children(".element"),
        //設方塊最高值max一開始等於0
        max = 0;
        b.each(function(){
          //判斷代入高度值是否大於max
          if($(this).height() > max) {
            //大於則取代原max的值
            max = $(this).height();
          }
        });
        //所需層方塊高度皆爲max
        b.height(max);
      });
    </script>

現在方塊高度保持一致了

---

入門學習所用，僅限于個人練習。