試圖調整一組後，潛水已通過jQuery的

Question

首先裝載我看不出這樣做沒有jQuery的另一種方式，如果這樣做，請讓我知道一個更好或更正確方法。

所以基本上我加載在圓的形狀3個的div，裏面它們各自是一個內部的div與來自@for循環生成的列表，所以大小會有所不同（儘管不應該過大）。

也許我的CSS一開始是錯誤的，但它們不會增長爲表格邊框，所以我試圖找到最大的div的最大寬度或高度並將其應用於所有它們，以便它們全部比賽。

我要的是9（3×3）細胞在左上角，左下角和右下角的圓形網格（但可能會改變）。下面是我一直在努力的樣本，試圖讓它正確。注 - 列表異步加載數據。

.circleBase { 
    border-radius: 50%; 
    behavior: url(PIE.htc); 
} 

.type1 { 
    display: table-cell; 
    width: 100px; 
    height: 100px; 
    background: white; 
    border: 1px solid #ff6600; 
    vertical-align: middle; 
    text-align: center; 
} 

.type2 { 
    display: table-cell; 
    width: 100px; 
    height: 100px; 
    background: white; 
    border: 1px solid #ff6600; 
    vertical-align: middle; 
    text-align: center; 
} 

.type3 { 
    display: table-cell; 
    width: 100px; 
    height: 100px; 
    background: white; 
    border: 1px solid #ff6600; 
    vertical-align: middle; 
    text-align: center; 
} 

.InnerCircle1 { 
    display: inline-block; 
} 

.InnerCircle2 { 
    display: inline-block; 
} 

.InnerCircle3 { 
    display: inline-block; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="circleBase type1"> 
    <div class="InnerCircle1"> 
    <div id="firstTable"> 
     @Html.Partial("_..."). 
     <div class="spinner"> 
     </div> 
     <div>Loading...</div> 
    </div> 
    </div> 
</div> 
<br /> 
<div class="circleBase type2"> 
    <div class="InnerCircle2"> 
    <div id="secondTable"> 
     @Html.Partial("_...") 
     <div class="spinner"> 
     </div> 
     <div>Loading...</div> 
    </div> 
    </div> 
</div> 

<div class="circleBase type3"> 
    <div class="InnerCircle3"> 
    <div id="thirdTable"> 
     @Html.Partial("_...") 
     <div class="spinner"> 
     </div> 
     <div>Loading...</div> 
    </div> 
    </div> 
</div> 

Ĵ查詢...

<script type="text/javascript"> 
    $(document).ready(function() { 

     //Load Age Counts 
     $.ajax({ 
      url: "/Cont/_TableOne", 
      type: "GET", 
     }) 
     .done(function (partialViewResult) { 
      $("#firstTable").html(partialViewResult) 
     })//Set Width/Height 
     .done(function() { 
      var aw = $(".InnerCircle1").width() + 50; 
      var ah = $(".InnerCircle1").height() + 50; 
      if (aw > ah) { 
       $('.type1').css('width', aw); 
       $('.type1').css('height', aw); 
      } else { 
       $('.type1').css('width', ah); 
       $('.type1').css('height', ah); 
      }; 
      console.log("1"); 
     }); 

     //Load Age Counts 
     $.ajax({ 
      url: "/Cont/_TableTwo", 
      type: "GET", 
     }) 
     .done(function (partialViewResult) { 
      $("#secondTable").html(partialViewResult) 
     })//Set Width/Height 
     .done(function() { 
      var aw = $(".InnerCircle2").width() + 50; 
      var ah = $(".InnerCircle2").height() + 50; 
      if (aw > ah) { 
       $('.type2').css('width', aw); 
       $('.type2').css('height', aw); 
      } else { 
       $('.type2').css('width', ah); 
       $('.type2').css('height', ah); 
      }; 
      console.log("2"); 
     }); 

     //Load Age Counts 
     $.ajax({ 
      url: "/Cont/_TableThree", 
      type: "GET", 
     }) 
     .done(function (partialViewResult) { 
      $("#thirdTable").html(partialViewResult) 
     })//Set Width/Height 
     .done(function() { 
      var aw = $(".InnerCircle3").width() + 50; 
      var ah = $(".InnerCircle3").height() + 50; 
      if (aw > ah) { 
       $('.type3').css('width', aw); 
       $('.type3').css('height', aw); 
      } else { 
       $('.type3').css('width', ah); 
       $('.type3').css('height', ah); 
      }; 
      console.log("3"); 
     }); 
    }) 
    .done(function() { 
     //sync up 
     var aw = $(".InnerCircle1").width() + 50; 
     var ah = $(".InnerCircle1").height() + 50; 
     var cw = $(".InnerCircle2").width() + 50; 
     var ch = $(".InnerCircle2").height() + 50; 
     var dw = $(".InnerCircle3").width() + 50; 
     var dh = $(".InnerCircle3").height() + 50; 

     var values = [aw, ah, cw, ch, dw, dh]; 
     var maxVal = 0; 

     for (var i = 1; i < values.count(); i++) { 
      if (maxVal < values[i]) { 
       maxVal = i; 
      } 
     } 
     console.log(maxVal); 
    }); 
</script> 

我試圖把每個partialview呼叫其自身的功能，並以$。當打電話給他們，但似乎並沒有工作無論是。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.when(TableOne(), TableTwo(), TableThree()).done(function() { 
      FinalSync(); 
     }); 
    }); 
</script> 

沒有給出像其他錯誤，但它並沒有同步它們加起來，我也把中的console.log每一個和最後的同步記錄早於其他來電！

Answer 1

https://jsfiddle.net/Lnc1yzk3/ 你有過於複雜的事情！

$.when(TableOne(), TableTwo(), TableThree()).done(function() {  
    var maxH = 0; 
    $("div.circleBase").each(function() { 
     maxH = Math.max(maxH, $(this).height()); 
    }); 
    maxH += 50; 
    $("div.circleBase").width(maxH); 
    $("div.circleBase").height(maxH); 
}); 

但因爲你火3個不同的Ajax調用，我會調整大小移動到一個單獨的功能，像FinalSync();並調用它的每個格加載後。所以FinalSync不是最好的名字。也許SyncWidthAndHeightAfterDivLoaded :)

我以爲你想讓每個圓的大小相同....否則只需在完成ajax請求後重新調整當前圓的大小。