创建元素直到条件为真答案

【问题标题】：Create element until condition is true创建元素直到条件为真
【发布时间】：2015-09-03 17:20:58
【问题描述】：

我想在另一个元素中创建元素，直到条件为真。我已经尝试过这段代码，但它不起作用。

//  calculate span size and it's parent
var homeHeight = $(".home").height();
var homeWidth = $(".home").width();
var homeSize = (homeHeight + homeWidth) * 2;
var spanHeight = $(".back-animation span").height();
var spanWidth = $(".back-animation span").width();
var spanSize = (spanHeight + spanWidth) * 2;
// create span elements to fill it's parent.
var createSpan = function() {
    var span = document.createElement("span");
    while (spanSize <= homeSize) {
        $(".animation-hide-overflow").append(span);
        spanSize = spanSize + spanSize;
    }
};
createSpan();

注意：它与 JQuery 结合使用，我在控制台中没有收到任何错误。注2：我尝试了像底部这样的循环，但它也不起作用。

for (spanSize; spanSize <= homeSize; spanSize = spanSize + spanSize) {
    $(".animation-hide-overflow").append(span);
}

编辑： 感谢提及，我忘了调用 createSpan 函数！现在它正在工作，但它只创建一次跨度。有什么解决办法吗？

jsfiddle 进行更好的演示： http://jsfiddle.net/pooria_h/vqmgmyj0/1/ （它应该继续创建 span 元素，直到填满父元素。）

【问题讨论】：

您只是在发布的代码中定义了createSpan 函数，但您永远不会调用它。
是否可以创建一个工作演示？这可能有助于我们可视化您的问题。
向我们展示您的 html 代码
尝试在底部添加createSpan();
jsfiddle 会有所帮助。 SO中的人喜欢小提琴

标签： javascript jquery dom for-loop while-loop

【解决方案1】：

这个部分有问题

// create span elements to fill it's parent.
var createSpan = function() {
    var span = document.createElement("span");
    while (spanSize <= homeSize) {
        $(".animation-hide-overflow").append(span);
        spanSize = spanSize + spanSize;
    }
}

如果您更加注意，您会看到我在循环之外创建了 span 变量，所以会发生以下情况：循环正常工作并增加 spanSize 变量直到它等于 homeSize 变量，该变量在起点较大，但最大的问题是没有创建元素！ span 元素 在循环之前创建。所以这是正确的方法：

// create span elements to fill it's parent.
var createSpan = function() {
    while (spanSize <= homeSize) {
        var span = document.createElement("span");
        $(".animation-hide-overflow").append(span);
        spanSize = spanSize + spanSize;
    }
}

【讨论】：