通过jquery加载集合后尝试调整潜水的大小

首先，如果没有Jquery，我看不到其他方法可以做到这一点，如果有更好或更合适的方法，请让我知道

所以基本上我加载了三个圆的div，每个圆里面都有一个内部div，其中的列表是由@for循环生成的，所以大小会有所不同（尽管永远不会太大）

也许我的css一开始就错了，但它们并不像表格边框那样增长，所以我试图找到最大div的最大宽度或高度，并将其应用于所有div，以便它们都匹配

我想要的是一个由9（3x3）个单元格组成的网格，在左上角、左下角和右下角各有一个圆（但这可能会改变）。下面是我第一次尝试正确使用的示例。注意-列表异步加载数据

.circleBase{
边界半径：50%；
行为：url（PIE.htc）；
}
.type1{
显示：表格单元格；
宽度：100px；
高度：100px；
背景：白色；
边框：1px实心#ff6600；
垂直对齐：中间对齐；
文本对齐：居中；
}
.类型2{
显示：表格单元格；
宽度：100px；
高度：100px；
背景：白色；
边框：1px实心#ff6600；
垂直对齐：中间对齐；
文本对齐：居中；
}
.类型3{
显示：表格单元格；
宽度：100px；
高度：100px；
背景：白色；
边框：1px实心#ff6600；
垂直对齐：中间对齐；
文本对齐：居中；
}
.内圆1{
显示：内联块；
}
.内圆2{
显示：内联块；
}
.内圆3{
显示：内联块；
}

@Html.Partial（“\u…”）。
加载。。。


@Html.Partial（“\u…”）
加载。。。
@Html.Partial（“\u…”）
加载。。。

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>

$（文档）.ready（函数（）{
//装载年限计数
$.ajax({
url:“/Cont/_TableOne”，
键入：“获取”，
})
.done（函数（partialViewResult）{
$（“#firstTable”）.html（partialViewResult）
})//设置宽度/高度
.done（函数（）{
var aw=$（“.InnerCircle1”）.width（）+50；
var ah=$（“.InnerCircle1”）.height（）+50；
如果（aw>ah）{
$（'.type1'）.css（'width'，aw）；
$（'.type1'）.css（'height'，aw）；
}否则{
$（'.type1'）.css（'width'，ah）；
$（'.type1'）.css（'height'，ah）；
};
控制台日志（“1”）；
});
//装载年限计数
$.ajax({
url:“/Cont/_TableTwo”，
键入：“获取”，
})
.done（函数（partialViewResult）{
$（“#secondTable”）.html（partialViewResult）
})//设置宽度/高度
.done（函数（）{
var aw=$（“.InnerCircle2”）.width（）+50；
var ah=$（“.InnerCircle2”）.height（）+50；
如果（aw>ah）{
$（'.type2'）.css（'width'，aw）；
$（'.type2'）.css（'height'，aw）；
}否则{
$（'.type2'）.css（'width'，ah）；
$（'.type2'）.css（'height'，ah）；
};
控制台日志（“2”）；
});
//装载年限计数
$.ajax({
url:“/Cont/_tabletree”，
键入：“获取”，
})
.done（函数（partialViewResult）{
$（“#第三表”）.html（partialViewResult）
})//设置宽度/高度
.done（函数（）{
var aw=$（“.InnerCircle3”）.width（）+50；
var ah=$（“.InnerCircle3”）.height（）+50；
如果（aw>ah）{
$（'.type3'）.css（'width'，aw）；
$（'.type3'）.css（'height'，aw）；
}否则{
$（'.type3'）.css（'width'，ah）；
$（'.type3'）.css（'height'，ah）；
};
控制台日志（“3”）；
});
})
.done（函数（）{
//同步
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值=[aw、ah、cw、ch、dw、dh]；
var-maxVal=0；
对于（var i=1；i

我曾尝试将每个partialview调用放在自己的函数中，并使用$.when调用它们，但这似乎也不起作用

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

$（文档）.ready（函数（）{
$.when（TableOne（）、TableTwo（）、TableThree（））.done（函数（）{
最终同步（）；
});
});

它没有像另一个一样给出错误，但是它没有同步所有的错误，而且我在每个错误中都放了一个console.log，最后的同步在其他错误之前记录了这个调用

你把事情搞得太复杂了

$.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调用，我将把resize移到一个单独的函数中，比如

FinalSync（）

并在加载每个div后调用它。所以FinalSync不是最好的名字。可能是SyncWidth和HeightAfterDivLoaded:）

我想你希望每个圆的大小都一样。。。。否则，只需在完成ajax请求后调整当前圆圈的大小。

你把事情搞得太复杂了

$.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调用，我将把resize移到一个单独的函数中，比如

FinalSync（）

并在加载每个div后调用它。所以FinalSync不是最好的名字。可能是SyncWidth和HeightAfterDivLoaded:）

---

我想你希望每个圆的大小都一样。。。。否则，在完成ajax请求后，只需调整当前圆圈的大小。

我很困惑，为什么要做3次相同的ajax请求？所以你想要一个3 x 3的网格，其中有3个圆圈。其中一个圆中最长的内部列表决定了高度和宽度