Question

我正在尝试在另一个内部绘制一个框，并继续绘制它们，直到宽度为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;
    }
}

目前它只画了一个盒子。它应该在最里面的盒子里画更多的盒子，直到最后一个盒子宽2px。

如何在最内部框内递归绘制一个框，直到最后一个框绘制到2px宽？

Answer 1

您的代码存在两个严重问题，导致其无法正常工作。

1）您始终更新相同的“box”变量。您需要每次创建一个不同的。我通过添加对clone()的调用来修复此问题。

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

中添加findInnerBox

以下代码根据这些微小调整执行您想要的操作：

var innerBox = $('.box');
var innerBoxDimentions;
var boxHtml = innerBox.clone().removeClass('outter');

$(document).ready(function(){

    do {  
        innerBox = findInnerBox(innerBox);
        innerBoxDimentions = innerBox.width() / 2;


        boxHtml = boxHtml.clone().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){
        return findInnerBox(box.children('.box'))
    } else{
       return box;
    }
}

/* CSS Styles for Recursive Box */

.box{ border:solid 1px #000; }
.outter { width: 500px; height:500px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="box outter"></div>

Answer 2

Opps，我猜太晚了。这是我的代码版本

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

http://jsfiddle.net/443wovkk/2/

递归绘制一个Box JavaScript

2 个答案: