javascript - 如何将元素添加到一个 div 中，直到它的宽度几乎等于另一个 div？

Question

我有 2 个容器，一个在另一个容器中，我试图用 document.ready 上的元素填充内部容器，因此它的宽度几乎等于外部的 div 宽度。

它与 window.resize 上的“if”语句完美配合，但由于我需要在 document.ready 上填充 div，所以我尝试使用“while”但它不起作用。为什么？

这是 HTML:

<style>
    #outer {float: left; width: 500px; background: grey}
    #inner {float: left; width: auto;}
    li {float: left; margin: 0 10px}
</style>


<div id="outer">
    <ul id="inner">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

...和 ​​JS:

function width_check() {
    var ddd = $("#outer").width() - $("#inner").width();
    var sss = 0;

    if (ddd > 100) {
        sss = 1;
    } else { sss = 0 };}​


$(document).ready function() {
    width_check();

    while (sss = 1) {
        $("#inner").append('<li></li>');
        width_check();
                    }        }

Answer 1

我认为你这里有范围问题。

您有一个定义了 var sss = 0 的函数。但是 $(document).ready 的检查有它自己的 sss。 sss 在此函数中未定义。尝试类似的东西:

function width_check()
{
    var ddd = $("#outer").width() - $("#inner").width();
    return ddd > 100;
}​


$(document).ready( function() // check the extra brackets around the function.
{
    while(width_check()) // check the width every time
    {
        $("#inner").append('<li></li>');
    }       
});