jQuery高度自動調整遇到麻煩

Question

我在SharePoint中有一個頁面，其中包含本地和全局內容。 對於本地內容，我們使用定制的編輯器Web部件（Telerik）。 對於全局內容，我讓jQuery從全局存儲庫中的外部文件中寫入內容。

現在，本地和全局內容是通過無序列表呈現的，為了使本地和全局內容看起來無縫，我讓jQuery自動調整了本地和全局容器的位置：

在此頁面中，內容所有者應能夠根據需要編輯本地內容，這可以通過Telerik Web部件實現：

但是，一旦保存更改，元素就會變得混亂：

我需要點擊刷新以將元素放置到位。 有時，甚至沒有必要編輯頁面來獲取該錯誤。 有時，第一次轉到該頁面還會弄亂元素的位置。 和以前一樣，您需要刷新頁面。 這是不一致的。 有時，您只需刷新一次。 其他時候，需要刷新一下。

這是該頁面的代碼：

<script lang="en" type="text/jscript">

  function changePos(src,tgt) {
      var pos = $(src).height() + 20 + "px";
      $(tgt).css({top: pos});
  }

  function changeIndex (src){
      switch(src)
        {
          case "buy":
            $("#buy").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Buy");
            break;
          case "comp":
            $("#comp").css("z-index","3");
            $("#buy").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Comp");
            break;
          case "travel":
            $("#travel").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#buy").css("z-index","1");
            //alert("Travel");
            break;
          case "comm":
            $("#comm").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Comm");
            break;
          case "fclts":
            $("#fclts").css("z-index","3");
            $("#comm").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Facilities");
            break;
          case "dept":
            $("#dept").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#comm").css("z-index","1");
            //alert("Dept");
            break;
          case "career":
            $("#career").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Career");
            break;
          case "pay":
            $("#pay").css("z-index","3");
            $("#career").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Pay");
            break;
          case "time":
            $("#time").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#career").css("z-index","1");
            //alert("Time");
            break;
        }
      }     

  $(document).ready(function(){
      var path = window.location.pathname;
      var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];    

      switch(filename){
          case "EmployeeResourcesAUS":
            $("#locDir").text("Austin Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;
          case "EmployeeResourcesCLG":
            $("#locDir").text("Calgary Phone Directory");
            $("#locDir").attr("href","https://webkc.kenonic.com/directory/Phonelist/PhoneList.pdf");
            break;
          case "EmployeeResourcesMDW":
            $("#locDir").text("Midwest Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesLLLP":
            $("#locDir").text("Austin LLLP Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesWSC":
            $("#locDir").text("West Coast Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesGCEC":
            $("#locDir").text("Gulf Coast EC Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesKNX":
            $("#locDir").text("Knoxville Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesBDN":
            $("#locDir").text("Bradenton Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesSG":
            $("#locDir").text("Singapore Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesCR":
            $("#locDir").text("Costa Rica Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesPH":
            $("#locDir").text("Philippines Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;                                                                  
        }

      changePos("#buy","#comm");
      changePos("#comp","#fclts");
      changePos("#travel","#dept");

      var intA = $("#buy").height() + $("#comm").height();
      var intB = $("#comp").height() + $("#fclts").height();
      var intC = $("#travel").height() + $("#dept").height();

      if (intA > intB && intA > intC){
          var intH = intA + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }
      else if (intB > intA && intB > intC){
          var intH = intB + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});        
      }
      else{
          var intH = intC + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }      

      var intD =  $("#career_content").height(); 
      var intE =  $("#pay_content").height();
      var intF =  $("#time_content").height();
      var pxlD

      if (intD > intE && intD > intF) {
          pxlD = intH + intD + 300 + "px";
      }
      else if (intE > intD && intE > intF) {
          pxlD = intH + intE + 300 + "px";
      }
      else {
          pxlD = intH + intF + 300 + "px";
      }

      $("#emp_rsrcs").css({height: pxlD});

      //contentDisp("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html","#gblContent1");
      //$("#gblContent1").load("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html");
    }

    );

</script>

代碼的哪一部分造成了這種疾病？ 另外，如果您碰巧知道我正在做的事情更好的替代方法，那么我無所不能。 我是jQuery，BTW的新手，所以請忍受:(

更新：

我似乎已經找到了錯誤。 發生的情況是有時會忽略全局內容div的高度，這可能是因為changePos函數是在全局內容成功加載之前觸發的。 因此，例如，在“采購與運輸”部分中，本地內容（＃locContent1）的高度為109px，全局內容（＃gblContent1）的高度為189px。 這意味着整個div（#buy）的總高度應為298px。 通常，changePos函數只能識別本地內容的高度，因此changePos僅等於129px，導致目標div（#comm）重疊其位置（如圖3所示）。 因此，這意味着該函數在加載全局內容之前被觸發。

我如何告訴jQuery僅在成功加載全局內容后才使用changePos函數？

更新2

jQuery讀取我的全局內容DIV的高度為0，即使在加載內容之后也是如此。 如何確定新高度？ 還是應該只指定一個固定高度？

Answer 1

有沒有與此相關的CSS？ 我認為您缺少位置屬性，並且還為本地內容Web部件設置了高度屬性嗎？ 如果不是，您也可以嘗試設置height屬性