Javascript 递归地绘制一个框

我试着在另一个盒子里面画一个盒子，一直画到宽度是2px

这是小提琴：

JavaScript:

var innerBox = $('.box');
var innerBoxDimentions;
var boxHtml = innerBox.clone().removeClass('outter');

$(document).ready(function(){

    do {  
        innerBox = findInnerBox(innerBox);
        innerBoxDimentions = innerBox.width() / 2;


        boxHtml = boxHtml.width(innerBoxDimentions).height(innerBoxDimentions);
        innerBox.append(boxHtml);
    }
    while (innerBoxDimentions > 2);

    //var boxHtml = innerBox.clone().width(innerBoxDimentions/2).height(innerBoxDimentions/2);
    innerBox.append(boxHtml);

});


function findInnerBox(box){
    if(box.children('.box').length > 0){
        findInnerBox(box.children('.box'))
    } else{
       return box;
    }
}

目前它只绘制一个框。它应该在最里面的盒子里画更多的盒子，直到最后一个盒子是2倍宽

---

如何递归地在最里面的框中连续绘制一个框，直到最后绘制的框达到2倍宽？

您的代码有两个关键问题使其无法工作

1） 您总是在更新相同的“box”变量。每次都需要创建一个不同的。我通过添加对

clone（）

的调用解决了这个问题

2） 递归函数在递归后不返回值。在

findinerbox

中添加一个

return

下面的代码可以根据您的需要进行这些小的调整：

var innerBox=$（'.box'）；
变量内盒维数；
var-boxHtml=innerBox.clone（）.removeClass（'outter'）；
$（文档）.ready（函数（）{
做{
innerBox=FindinerBox（innerBox）；
InnerBoxDimensions=innerBox.width（）/2；
boxHtml=boxHtml.clone（）.width（innerBoxDimensions）.height（innerBoxDimensions）；
append（boxHtml）；
}
而（InnerBoxDimensions>2）；
//var-boxHtml=innerBox.clone（）.width（innerboxdimensions/2）、height（innerboxdimensions/2）；
append（boxHtml）；
});
功能FindinerBox（盒）{
if（box.children（'.box'）。长度>0）{
返回findInnerBox（box.children（'.box'））
}否则{
返回框；
}
}

/*递归框的CSS样式*/
.box{border:solid 1px#000；}
.outter{宽度：500px；高度：500px}

哎呀，我想太晚了。 这是我的代码版本

var size = 500;
while(size = size - 20){
    $('.box:last').append('<div class="'+size+' box"></div>');
    $('.'+size).css('height',size).css('width',size);
}

var size=500；
而（尺寸=尺寸-20）{
$（'.box:last'）。追加（''）；
$（'..+size）.css（'height'，size.）.css（'width'，size）；
}

---

你的问题是？为什么我的问题被否决了，我只想得到一个答案，现在没人会看了。