jqueryでセットがロードされた後にダイビングのサイズを変更しようとしています

Question

まず、Jqueryなしでこれを行う別の方法はありません。これを行うより適切な方法があれば教えてください。

基本的には、円の形に3つのdivがロードされています。内側にはそれぞれforループから生成されたリストがあるinner divがありますので、サイズは変わります（大きすぎるはずはありません）。

おそらく私のCSSは間違っていますが、テーブルの境界線として成長しないので、最大の幅や高さを見つけようとしています。一致。

私が欲しいのは、左上、左下、右下に円が描かれた9（3x3）セルのグリッドです（しかし、それは変わるかもしれません）。以下は私が最初にそれを正しくしようと働いているサンプルです。注 - リストは非同期にデータをロードします。

.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> 

Jクエリ...

<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コールを入れてみましたし、$ .whenでそれらを呼び出すが、それは動作していないようでしたしていますどちらか。

<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();のように別々の機能にリサイズを移動し、それぞれのdivがロードされた後、それを呼び出すと思います。だから、FinalSyncは最善の名前ではありません。たぶんSyncWidthAndHeightAfterDivLoaded :)

私はあなたがそれぞれのサークルを同じサイズにしたいと思っていました。そうでなければ、ajaxリクエストの終了後に現在のサークルのサイズを変更するだけです。