Создайте элемент до тех пор, пока условие не будет истинным

Question

Я хочу создать элементы внутри другого элемента, пока условие не будет истинным. Я пробовал этот код, но он не работает.

// 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); 
} 

EDIT: Спасибо за упоминание, я забыл вызвать функцию createSpan! теперь он работает, но он создает диапазон только один раз. Любые решения?

jsfiddle для лучшей демонстрации: http://jsfiddle.net/pooria_h/vqmgmyj0/1/ (Он должен продолжать создавать пролетных элементы до тех пор, пока не заполнится родительский элемент.)

Answer 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; 
    } 
} 

Если вы уделять больше внимания вы можете увидеть, что я создал переменная диапазона вне цикла. Так вот что происходит: Loop работает правильно и увеличивается 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; 
    } 
}